5

我正在尝试调用一个 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吗？谢谢您的帮助。

4

3 回答 3

23

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

于 2013-06-12T18:20:52.860 回答
20

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

id="next"

你应该有

class="next"

然后只需使用类选择器，如

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

它应该适用于所有人

于 2013-06-12T18:21:49.867 回答
1

也许这样的东西是你想要的：

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

于 2013-06-12T18:29:40.923 回答