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/

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

3 个答案: