19

我有 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);
});

但它只适用于第一个按钮，点击其他按钮被忽略。

4

7 回答 7

45

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

您的 HTML 无效。页面中不能有多个具有相同id属性值的元素。

引用规范：

7.5.2元素标识符：id 和 class 属性

id = name [CS]
此属性为元素分配名称。此名称在文档中必须是唯一的。

解决方案：从更改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>

和jQuery 代码：

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

但它仅适用于第一个按钮

jQuery#id选择器文档：

每个 id 值只能在文档中使用一次。如果为多个元素分配了相同的 ID，则使用该 ID 的查询将仅选择 DOM 中第一个匹配的元素。但是，不应依赖此行为；具有多个使用相同 ID 的元素的文档无效。

如果您查看 jQuery 源代码，您可以看到当您$使用 id selecor-( $("#id")) 调用时，jQuery 调用了本机 javascriptdocument.getElementById函数：

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

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

演示

于 2012-06-20T07:18:21.007 回答
6

ID 表示“标识符”，每个文档仅有效一次。由于此时您的 HTML 是错误的，因此某些浏览器会选择第一个出现的元素，一些最后出现的具有该 ID 的元素。

更改名称的 id 将是一个很好的步骤。

然后使用$('button[name="xyz"]').click(function(){

于 2012-06-20T07:20:31.720 回答
1

根据我的经验，如果您改用$('button#xyz')选择器，它将起作用。这是一个 hack，但它仍然是无效的 HTML。

于 2014-05-25T11:11:32.900 回答
1

尽管将 id 更改为类更好，但您可以使用属性 equals 选择器获取具有相同 id 的所有元素：

$('[id="xyz"]')

或者只获取 id xyz 的按钮：

$('button[id="xyz"]')

或者 id 为 xyz 的 div：

$('div[id="xyz"]')

等等

或者，您可以使用“属性包含选择器”来获取 id 包含“xyz”的所有元素：

$('[id*="xyz"]')

当然，这意味着所有 id 部分包含“xyz”的元素都将被选中。

于 2017-02-09T17:21:11.160 回答
1

如果您有多个具有相同 ID 的元素，这也有效。

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

你可以在这里查看

于 2017-05-04T11:32:31.977 回答
1

如果容器中有相同的 id，则可以使用 on() 访问每个事件的每个元素

$("#containers").on("click","#xyz",function(){
  alert($(this).val())
  })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="containers">

<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>

</div>

关于 on() 的信息在这里

于 2019-06-12T14:16:12.110 回答
0

您不能拥有相同的 id，因为 id 在页面 HTML 中是唯一的。将其更改为类或其他属性名称。

$('attributename').click(function(){ alert($(this).attr(attributename))});
于 2012-06-20T07:52:28.443 回答