如何select一个特定的<li>和jquery获取value的attr值并显示在网站上

Question

我的作业如下：

创建一个事件侦听器，这样当您单击任何列表项时，其 "value" 属性的值将显示在此行旁边。

我的 HTML 和有序列表中有 8 个列表项。值=1,2,3..等我现在在哪里

$("li").click(function () {

   var value = $("li").attr("value");
   $("#spanFieldId").text(value);

});`

spandFieldId 是列表项值应该打印的地方。目前，无论我单击第一个列表项、第二个还是任何其他项，它总是打印 1。

所以基本上，我如何通过jquery将它select特定的li（我点击）取出价值的attr值并显示在网站上？ html 中的列表项如下所示

<li value="3">blablablabla</li>
<li value="4">blablablabla</li>
<li value="5">blablablabla</li>

有什么建议吗？

Answer 1

替换

var value = $("li").attr("value");

和

var value = $(this).attr("value");

字符串选择器 "li" 选择 all <li> 并且 .attr() 只会 return 在中找到的第一个值那个选择。使用 this 而不是利用 jQuery 传递给侦听器的上下文，其中包含对事件正在作用的 DOM 元素的引用。

Answer 2

试试这个：

$("li").click(function () {

   var value = $(this).attr("value");
   $("#spanFieldId").text(value);

});

Answer 3

而不是

var value = $("li").attr("value");

使用

var value = $(this).attr("value");

这将 select 单击的列表而不是第一个。

How to select a specific <li> with jquery get the attr value of value and display it on the website