时间戳

首页 > 解决方案 > 对不同的 html li 对象使用相同的 jquery 函数

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

问题描述

我正在尝试创建一个将文本从特定列表元素复制到输入表单的函数。我正在努力解决的是我的函数只是复制所有文本而不是特定元素。有人对如何正确（和动态地）指示列表对象有任何建议吗？谢谢！

<!--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 后的输出应该是： ,test （而不是 ,testbrumbo）

标签： javascripthtmljquery

解决方案

您需要更改$('.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>

推荐阅读