javascript - 对不同的 html li 对象使用相同的 jquery 函数

Question

我正在尝试创建一个函数，将文本从特定列表元素复制到输入表单中。我所困扰的是我的函数只是复制所有文本而不是特定元素。有人对如何正确(动态)指示列表对象有任何建议吗？谢谢!

<!--Copy into Form Field-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!--Input field and list items-->
<input type="text" class="form-control" id="input2" placeholder="Input" size="200">

<li class="test" id="li1">test</li>
<li class="test" id="li2">brumbo</li>

  <!--Function to Copy list items into input field-->
<script type="text/javascript">
$(function () {
    $('.test').on('click', function () {
        var text = $('#input2');

        text.val(text.val() +','+ $('.test').text());    
    });
});
</script>

点击例如后的输出测试应该是:，test(而不是，testbrumbo)

Answer 1

您需要将 $('.test').text() 更改为 $(this).text() 才能获取当前 li

$(function () {
    $('.test').on('click', function () {
        var text = $('#input2');

        text.val(text.val() +','+ $(this).text());    
    });
});

<!--Copy into Form Field-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!--Input field and list items-->
<input type="text" class="form-control" id="input2" placeholder="Input" size="200">

<li class="test" id="li1">test</li>
<li class="test" id="li2">brumbo</li>

  <!--Function to Copy list items into input field-->
<script type="text/javascript">

</script>