如何使用jquery选择特定的<li>获取值的attr值并将其显示在网站

Question

我的作业如下：

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

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

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

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

});`

spandFieldId是列表项值应该打印的位置。目前它始终打印1是否我点击第一个列表项，第二个或任何其他。

所以基本上，如何让它选择特定的li（我点击），jquery取出值的attr值并将其显示在网站上？ html中的列表项看起来像这样

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

有任何建议吗？

Answer 1

试试这个：

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

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

});

Answer 2

替换

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

与

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

字符串选择器"li"选择所有 <li>，.attr()只返回在该选择中找到的第一个值。使用this代替利用jQuery传递给侦听器的上下文，其中包含对事件所依赖的DOM元素的引用。

Answer 3

而不是

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

使用

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

这将选择点击的列表而不是第一个列表。