如何获取选定的 li 值

Question

我有一个数组列表，如下所示

var items = ['Iphones', 'Samsung', 'Huawei'] 其中我 append 到一个 li 如下。

HTML & JS

<div id="host">
<div class="data_box"></div>
</div>

     $.ajax({
             dataType: 'json',
             success: function (results) { 
             $('.data_box').html('<li class="li_of_phones">'+results.toString().split(',').join('<br/>')+'</li>').slideDown();
             },});


     <script>
        $('#host').on('click', '.li_of_phones', function () {
        console.log($(this).text());
        });
      </script>

当我尝试在用户单击时获取选定的 li 时，它返回数组，即Iphones,Samsung,Huawei而不是选定的手机（可能是 iphone）

为什么当用户单击li时我没有得到选定的电话，但随后它将数组中的所有电话返回给用户？

Answer 1

您似乎收到了来自 ajax 调用的结果作为逗号分隔的字符串，然后使用li_of_phones class 将其设置在单个<li>元素中。

您可以在 foreach 中循环拆分响应并为每个结果创建不同的 li 元素。

 const results = 'Iphones, Samsung, Huawei'; let phonesList = ''; results.split(',').forEach(phone => { phonesList += '<li class="li_of_phones">' + phone.trim() + '</li>'; }); $('.data_box').html(phonesList).slideDown(); $('#host').on('click', '.li_of_phones', function () { console.log($(this).text()); });

 .as-console-wrapper { max-height: 5.5em;important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="host"> <ul class="data_box"></ul> </div>

您可能需要更改结果列表项的一些 css styles。

Answer 2

您应该在 li 上添加一个事件。 我创建了一个小例子。

 $('li').click(function(e) { console.log(e.target.innerHTML); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li>one</li> <li>two</li> <li>three</li> </ul>