将 JavaScript 函数 onclick 更改为 jQuery

Question

我正在尝试让我的 javascript 功能在我的 jQuery 中运行。它是如何工作的，你点击一个文本（legend_tag）然后它被添加到文本区域（cartlist）

<textarea id="cartlist"></textarea>
<a href="#" id="legend_tag" onclick="CopyToTextarea(this)">item 1</a>
<a href="#" id="legend_tag" onclick="CopyToTextarea(this)">item 2</a>
<a href="#" id="legend_tag" onclick="CopyToTextarea(this)">item 3</a>
<a href="#" id="legend_tag" onclick="CopyToTextarea(this)">item 4</a>

JAVASCRIPT:

<script>
    function CopyToTextarea(a){
        var text = a.textContent;
        var textarea = document.getElementById('cartlist');
        textarea.value = textarea.value + text +'\n';
    }
</script>

上面的代码工作正常：

我的问题是我需要将 JavaScript 函数转换为 jQuery，我尝试添加：

$(document).ready(function (){
    $("#legend_tag").click(function CopyToTextarea(a){
        var text = a.textContent;
        var textarea = document.getElementById('cartlist');
        textarea.value = textarea.value + text +'\n';
      });
});

这给了我未定义的：

我的 jQuery 哪里做错了？

内外兼修$(document).ready

总结：JavaScript 函数到 jQuery，jQuery 函数不工作

更新：

已尝试将 id 更改为 class，但仍未定义，与上述相同的错误：

文本区域和点击：

<textarea id="cartlist"></textarea>
<a href="#" class="legend_tag" onclick="CopyToTextarea(this)">item 1</a>
<a href="#" class="legend_tag" onclick="CopyToTextarea(this)">item 2</a>
<a href="#" class="legend_tag" onclick="CopyToTextarea(this)">item 3</a>
<a href="#" class="legend_tag" onclick="CopyToTextarea(this)">item 4</a>

jQuery:

$(".legend_tag").click(function CopyToTextarea(a){
    var text = a.textContent;
    var textarea = document.getElementById('cartlist');
    textarea.value = textarea.value + text +'\n';
  });

Answer 1

由于您已经使用 jQuery 绑定了点击事件，因此无需针对每个锚标记捕获 onClick 事件。此外，在事件处理程序中，您可以捕获导致它触发的 event，然后使用 event.target.

到达触发事件的元素

$(".legend_tag").click((event) => {
  var text = event.target.textContent;
  var textarea = document.getElementById('cartlist');
  textarea.value = textarea.value + text + '\n';
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="cartlist"></textarea>
<a href="#" class="legend_tag">item 1</a>
<a href="#" class="legend_tag">item 2</a>
<a href="#" class="legend_tag">item 3</a>
<a href="#" class="legend_tag">item 4</a>

Answer 2

两个问题：

您正在尝试重复使用 id。每个 id 必须是唯一的。 class 非常适合此用例，因为您的锚标记基本相同。
您将事件处理程序的参数视为 DOM 元素。它实际上是一个事件。您需要 event.target，或者只使用 this，因为 JQuery 将 this 绑定到事件目标。

此外，使用 JQuery .text() 获取文本值，通常比尝试使用 .textContent 更容易（因为 .textContent 也从所有后代获取文本，这可能会导致 undefined 意外出现）

$(function (){
    $(".legend_tag").click(function() { 
      $('#cartlist').val($('#cartlist').val() + $(this).text() +'\n')
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="cartlist"></textarea>
<a href="#" class="legend_tag">item 1</a>
<a href="#" class="legend_tag">item 2</a>
<a href="#" class="legend_tag">item 3</a>
<a href="#" class="legend_tag">item 4</a>

Answer 3

试试这个：

$("#legend_tag").click(function(a) {
    var text = a.textContent;
    var textarea = document.getElementById('cartlist');
    textarea.value = textarea.value + text + '\n';
});

或者您可以将脚本完全转换为 jQuery

$(".legend_tag").on('click',function(){
        var text = $(this).text();
        var textarea = $('#cartlist');
        textarea.val(textarea.val() + text + '\n');
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="cartlist"></textarea>
<a href="#" class="legend_tag">item 1</a>
<a href="#" class="legend_tag">item 2</a>
<a href="#" class="legend_tag">item 3</a>
<a href="#" class="legend_tag">item 4</a>

将 JavaScript 函数 onclick 更改为 jQuery

Change JavaScript function onclick to jQuery

javascript

jquery

function

onclick