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

Question

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

这是带有Id="skip" 的按钮“淡入”的 JQuery 函数。单击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 函数是否只能调用第一个按钮？感谢您的帮助。

Answer 1

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

Answer 2

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

id="next"

你应该有

class="next"

然后像中一样使用类选择器

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

它应该适用于所有人

Answer 3

也许你想要的是这样的：

<button class="next" type="submit" value="2" name="submit">Next</button>
<div class="skip">
    <form method="post" >
        <input type="hidden" class="skip_ig" name="skip_ig" value=""></input>
        <div class="fade"><button type="submit" value="3" name="submit">Skip >></button> </div>
        Stuff here
    </form>
</div>


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

http://jsfiddle.net/tHcan/