JQuery 选择器 - 获取点击 id 的值答案

【问题标题】：JQuery Selectors - get value of clicked idJQuery 选择器 - 获取点击 id 的值
【发布时间】：2013-06-12 21:58:19
【问题描述】：

我有一组 id 元素：

<ul class='refine_checkbox'>
  <li id='check0' value='Large'><a href='#'>Large</a></li>
  <li id='check1' value='Medium'><a href='#'>Medium</a></li>
  <li id='check2' value='Medium'><a href='#'>Medium</a></li>
</ul>

我的目标是让 JQuery 返回点击的 id 的值。我可以响应 id 的“检查”组，但似乎无法返回值。

$(document).ready(function() { 

  $('[id^="check"]').each(function () {
      $(this).click(function () {
      alert("test")
      });
  });

});

有什么想法吗？

【问题讨论】：

你想要值还是id？？？
"我的目标是让 JQuery 返回被点击的 id 的值"
jquery get the id/value of LI after click function 的可能重复项

标签： jquery jquery-selectors

【解决方案1】：

只有一件事，属性值对 li 无效（不在 ol 中）。顺便说一下，在 ol 中，value 必须是一个数字。我不知道它已针对 HTLM5 进行了更改。

$(document).ready(function() { 

  $('[id^="check"]').click(function () {
      alert(this.value)
  });

});

【讨论】：

是的，因为您的代码无效。如果您使用 jquery 1.9.x 或更高版本，则可以改用 $(this).attr('value') jsfiddle.net/kBJzw 或更好，使用有效 HTML 的代码。在这里，你应该使用 data-value="" 然后 $(this).data('value')
使用数据值是我认为的正确方法。至少我现在有一个工作演示。

【解决方案2】：

首先你不需要.each()，这就足够了：

$('[id^="check"]').click(function(){})

然后要获得价值，您可以这样做：

$('[id^="check"]').click(function(){
    alert(this.value)
})

【讨论】：

使用 $(this).attr('value') 更好吗？忽略对 jquery 对象的强制转换不是 attr 函数做一些跨浏览器检查和规范化吗？
如果我没记错的话，.value 与所有浏览器都兼容。如果我是对的，.value 将比.attr() 更好，因为它减少了调用次数，这对于优化很重要。但同样，如果我错了并且它不兼容，那么.attr() 对可访问性会更好。
.change 事件不会触发警报框。
@LiviuT。对输入的属性值没有任何改变，但我很确定你适合 textarea
@LiviuT。在无效属性的情况下，你是对的：jsfiddle.net/SraUZ

【解决方案3】：

你可以使用

this.id

或

this.value

【讨论】：

【解决方案4】：

您不需要.each 只需调用click 事件试试这个

 $(document).ready(function() { 
   $('[id^="check"]').click(function () {
      alert("test")
      alert($(this).attr('value'));  //alert(this.value);
   });

 });

【讨论】：

这段代码只是给警报一个“0”，而不是点击的id的值。