如何为具有相同ID的多个自动生成按钮提供相同的链接

Question

如何为具有相同ID的多个自动生成按钮提供相同的链接？

我试过了，但它只给了第一个按钮链接，其余的按钮保持空白

$('#Button').click(function() {
    window.location='aaa.html';
});

Answer 1

在HTML中，只有一个具有给定ID的元素，要将相同的jQuery代码分配给多个元素，而应使用“class”属性。

请参阅：http://www.w3.org/TR/html401/struct/global.html#h-7.5.2

<强> JS：

$('.button').click(function() {
                    window.location='aaa.html';
                    });

<强> HTML：

<div class="button">DIV 1</div>
<div class="button">DIV 2</div>
<div class="button">DIV 3</div>

Answer 2

  

我试过了，但它只给了第一个按钮链接，其余的按钮保持空白

标识符在整个页面中应该是唯一的，才能成为有效的HTML。

当通过Id查询时，jQuery将只返回匹配的第一个。

尝试使用类，因为类可以应用于元素组。

然后更新您的选择器以使用类指示符.，类似于：

$('.YourClassName').click(function() {
    window.location='aaa.html';
});

---

有关jQuery id选择器的更多详细信息，请查看ID Selector (“#id”)文档。

如上所述：

  

每个id值只能在文档中使用一次。如果超过   一个元素已分配相同的ID，使用该ID的查询   只会选择DOM中第一个匹配的元素。这种行为   但是，不应该依赖;包含多个文档的文档   使用相同ID的元素无效。

Answer 3

您不应该为同一个id提供多个元素，但如果必须，您可以使用：

$('[id="Button"]').click(function() {
    window.location='aaa.html';
});

我建议将id全部以“Button”开头，并在生成它们时添加一个整数，这样你就有了结构：

<div id="Button1"></div>
<div id="Button2"></div>
<div id="Button3"></div>

所以你可以使用：

$('[id^="Button"]').click(function() {
    window.location='aaa.html';
});

另一种选择是设置一个特定的class，并具有以下结构：

<div class="button-class"</div>
<div class="button-class"></div>
<div class="button-class"></div>

并使用类似的东西：

$('.button-class').click(function() {
    window.location='aaa.html';
});

您可能想要了解的事件是事件委派：http://api.jquery.com/on/#direct-and-delegated-events

参考文献：

• http://api.jquery.com/attribute-equals-selector/
• http://api.jquery.com/attribute-starts-with-selector/

Answer 4

具有多个相同的ID是违反HTML规范的。您可以使用css类或其他选择器。