具有相同 ID 的多个按钮事件的 JQuery 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17072520/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery function for multiple button event with same Id
提问by Taewan
I am trying to call a JQuery function to occur fade in event for the buttons with same id, but it seems only first button in the brower can occur the event.
我试图调用一个 JQuery 函数来为具有相同的按钮发生淡入事件id，但似乎只有浏览器中的第一个按钮才能发生该事件。
This is JQuery Function to "fade in" for buttons with Id="skip". Once click the button(Id="next"), other button(Id=skip)is doing fade in.
这是 JQuery 函数，用于“淡入”带有Id="skip". 一旦单击button(Id="next")，其他button(Id=skip)正在淡入。
$(document).ready(function () {
$('button[id^="next"]').click(function () {
$("#skip").hide().fadeIn(5000);
});
});
This is the button id="next"
这是按钮 id="next"
<button id="next" type="submit" value="2" name="submit">Next</button>
And This is button id="skip"
这是按钮 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>
I have multiple buttons of these "next" and "skip". But only first "skip" button does fade-in, others are not. Is Jquery function can only call first button when there are multiple button with same id? Thank you for your help.
我有多个“下一步”和“跳过”按钮。但是只有第一个“跳过”按钮会淡入，其他人则不会。当有多个相同的按钮时，Jquery 函数是否只能调用第一个按钮id？感谢您的帮助。
回答by meagar
This is asked about a dozen times a day. The ID attribute must be unique within your document. You cannot have multiple elements with the same ID. This is undefined behaviour which typically manifests as only the first element being selected (presumably, at the browser level, subsequent duplicate IDs are ignored).
这一天被问到十几次。ID 属性在您的文档中必须是唯一的。你不能有相同ID的多个元素。这是未定义的行为，通常表现为仅选择了第一个元素（大概在浏览器级别，随后的重复 ID 将被忽略）。
回答by Ian
You're using your attributes wrong. ID attributes should only be used onceand should be unique. If you want multiple instances with the same identifier you should be using class attributes so instead of having
你错误地使用了你的属性。ID 属性只能使用一次并且应该是唯一的。如果你想要多个具有相同标识符的实例，你应该使用类属性而不是
id="next"
you should have
你应该有
class="next"
then just use the class selector as in
然后只需使用类选择器
$(".next").click( function() {
...
});
and it should work for all of them
它应该适用于所有人
回答by jk.
Maybe something like this is what you want:
也许这样的事情就是你想要的：
<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);
});
});
