具有相同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>

我有这些"下一个"和"跳过"的多个按钮.但只有第一个"跳过"按钮才会淡入,而有些则不会.当有多个按钮时,Jquery功能只能调用第一个按钮id吗？谢谢您的帮助.

Answer 1

这被问到一天十几次.ID属性在文档中必须是唯一的.您不能拥有具有相同ID的多个元素.这是未定义的行为,通常表现为仅选择第一个元素(可能在浏览器级别,忽略后续的重复ID).

Answer 2

你使用的属性错了.ID属性应该只使用一次,并且应该是唯一的.如果您希望具有相同标识符的多个实例,则应使用类属性,而不是使用

id="next"

你应该有

class="next"

然后只需使用类选择器

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

它应该适用于所有人