jQuery id选择器仅适用于第一个元素

  • Z时代
  • 2024-01-10
  • 分类：问答

我有3个具有相同ID的按钮，当他被点击时，我需要获取每个按钮的值。

<button id="xyz" type="button" class="btn btn-primary" value="1">XYZ1</button>
<button id="xyz" type="button" class="btn btn-primary" value="2">XYZ2</button>
<button id="xyz" type="button" class="btn btn-primary" value="3">XYZ3</button>

这是我当前的jQuery脚本：

$("#xyz").click(function(){
      var xyz = $(this).val();
      alert(xyz);
});

但这仅适用于第一个按钮，单击其他按钮将被忽略。

回答：

我有3个具有相同ID的按钮…

您的HTML无效，同一页面中的元素不能超过一个id。

引用规格：

7.5.2

此属性为元素分配名称。此名称在文档中必须唯一。

：从更改id为class，

<button type="button" class="btn btn-primary xyz" value="1">XYZ1</button>
<button type="button" class="btn btn-primary xyz" value="2">XYZ2</button>
<button type="button" class="btn btn-primary xyz" value="3">XYZ3</button>

和 ：

$(".xyz").click(function(){
    alert(this.value);
    // No need for jQuery :$(this).val() to get the value of the input.
});

但这仅适用于第一个按钮

jQuery #id选择器文档：

每个id值在文档中只能使用一次。

但是，不应依赖此行为。包含多个使用相同ID的元素的文档无效。

如果您查看jQuery源，则可以看到$使用id selecor-（$("#id")）进行调用时，jQuery会调用本机javascript

document.getElementById函数：

// HANDLE: $("#id")
} else {
    elem = document.getElementById( match[2] );
}

尽管在他们的规范中document.getElementById没有提到它必须返回第一个值，但这是大多数（也许是全部？）浏览器实现它的方式。

以上是 jQuery id选择器仅适用于第一个元素 的全部内容， 来源链接： utcz.com/qa/432793.html

回到顶部