具有相同ID的多个按钮事件的JQuery函数

Question

我正在尝试调用一个 JQuery 函数来为具有相同 id 的按钮发生淡入淡出事件，但似乎只有浏览器中的第一个按钮可以发生该事件。

这是用于“淡入”按钮的 JQuery 函数 Id="skip" 。单击 button(Id="next") 后，其他 button(Id=skip) 正在淡入。

 $(document).ready(function () {
    $('button[id^="next"]').click(function () {
        $("#skip").hide().fadeIn(5000);
    });
});

这是按钮 id="next"

  <button id="next" type="submit" value="2" name="submit">Next</button>

这是按钮 id="skip"

 <div id="skip">
<form method="post" >
<input type="hidden" id="skip_ig" name="skip_ig" value=""></input>
<div id="fade"><button type="submit" value="3" name="submit">Skip >></button></div>
<?php include('includes/aftersubmit.php');
</form>
</div>

我有多个这些“下一步”和“跳过”的按钮。但只有第一个“跳过”按钮会淡入，其他按钮则不会。当有多个按钮具有相同的 id 时，Jquery 函数是否只能调用第一个按钮？谢谢您的帮助。

原文由 Taewan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

每天大约要问十几次。 ID 属性在您的文档中必须是唯一的。您 不能有多个具有相同 ID 的元素。这是未定义的行为，通常表现为仅选择了第一个元素（大概在浏览器级别，随后的重复 ID 将被忽略）。

原文由 user229044 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你错误地使用了你的属性。 ID 属性应该只使用 一次 并且应该是唯一的。如果您想要具有相同标识符的多个实例，您应该使用类属性，而不是

id="next"

你应该有

class="next"

然后只需使用类选择器

$(".next").click( function() {
    ...
});

它应该对所有人都有效

原文由 Ian 发布，翻译遵循 CC BY-SA 3.0 许可协议