使用 Jquery 将函数绑定到多个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/868975/
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
Binding function to multiple elements with Jquery
提问by Alekc
I have this small problem with jquery: I need to do something like this:
我对 jquery 有一个小问题：我需要做这样的事情：
$(document).ready(function(){
links = {};
links.a = "Link a";
links.b = "Link b";
links.c = "Link c";
for (x in links){
$("#" + x).css("border","1px solid #000");
$("#" + x).click(function(){
alert(x);
});
}
});
</script>
<div id="a">a</div><br />
<div id="b">b</div><br />
<div id="c">c</div><br />
So that when you click on div#a you will get "Link a" alert, "Link b" on div#b and so on... The problem is that if you run this code, clicking on each element will give alert("Link c") as result, it seems that only the last function variation is assigned to each div...
这样当你点击 div#a 时，你会得到“链接 a”警报，div#b 上的“链接 b”等等......问题是，如果你运行这段代码，点击每个元素都会给出警报（ “链接 c”）作为结果，似乎只有最后一个函数变体被分配给每个 div ......
Of course i can hack it by editing the function to work with div's id and using $(this), but for cursiosity: is there a way to make this cycle work? By creating and assigning a new function to each element in function?
当然，我可以通过编辑函数来处理 div 的 id 并使用 $(this) 来破解它，但是出于好奇：有没有办法让这个循环起作用？通过为函数中的每个元素创建和分配一个新函数？
Thx in advance...
提前谢谢...
采纳答案by Sam Hasler
Use a closure: (a "this" solution is more elegant, but I'm posting this because a now deleted answer had a closure solution that didn't work)
使用闭包：（“这个”解决方案更优雅，但我发布这个是因为现在删除的答案有一个不起作用的闭包解决方案）
$(document).ready(function(){
links = {};
links.a = "Link a";
links.b = "Link b";
links.c = "Link c";
for (var x in links){
$("#" + x).css("border","1px solid #000");
$("#" + x).click(
function(xx){
return function() { alert(xx) };
}(x)
);
};
});
回答by Big J
the nice thing about jQuery is it allows chaining and binding multiple elements just like css.
jQuery 的好处在于它允许像 css 一样链接和绑定多个元素。
$(document).ready(function(){
$('#a,#b,#c')
.css("border","1px solid #000")
.bind('click',function(){
// do something
});
});
回答by duckyflip
I believe this is what you're after:
我相信这就是你所追求的：
$(document).ready(function(){
links = {
a:"Link a",
b:"Link b",
c:"Link c",
};
$.each(links, function(id,text){
$("#"+id)
.css("border","1px solid #000")
.click(function(){ alert(text) })
})
});
回答by Tushar Gupta - curioustushar
Working Demo http://jsfiddle.net/FWcHv/
工作演示http://jsfiddle.net/FWcHv/
in you code you are calling jQuery constructor many times i.e $('#a')than $('#b')and $('#c')instead you should call like $('#a,#b,#c')
在你的代码你调用jQuery的构造很多次，即$('#a')比$('#b')并$('#c')，而不是你应该叫喜欢$('#a,#b,#c')
In my code i have passed through all the id's using $.each and combined them and in the next step i have used $('#a,#b,#c')stored in variable xto make the code optimized and easy.
在我的代码中，我使用 $.each 传递了所有 id 并将它们组合起来，在下一步中，我使用了$('#a,#b,#c')存储在变量中x以使代码优化和简单。
i have also made a check that if links{}is empty it will not process using variable i
我还进行了检查，如果links{}为空，则不会使用变量进行处理i
$(document).ready(function () {
links = {};
links.a = "Link a";
links.b = "Link b";
links.c = "Link c";
i = 0;
x = '';
$.each(links, function (id) {
x += "#" + id + ',';
i++;
});
if (i > 0) {
$($(x.slice(0, -1))).css("border", "1px solid #000").click(function () {
alert($(this).text());
});
}
});
回答by Ben Koehler
<script type="text/javascript">
$(document).ready(function(){
$('.links').css("border","1px solid #000");
$('.links').live('click', function() {
alert("Link " + $(this).attr('id'));
});
});
</script>
</head>
<body>
<div id="a" class="links">a</div><br />
<div id="b" class="links">b</div><br />
<div id="c" class="links">c</div><br />
回答by gradbot
You need to use "this".
你需要使用“这个”。
$(document).ready(function(){
links = {};
links.a = "Link a";
links.b = "Link b";
links.c = "Link c";
for (var x in links){
$("#" + x).css("border","1px solid #000");
$("#" + x).click(function(){
alert("Link "+this.id+" Alert!");
});
}
});
回答by gradbot
<script type="text/javascript">
$(document).ready(function(){
links = {};
links.a = "Link a";
links.b = "Link b";
links.c = "Link c";
for (x in links){
$("#" + x).css("border","1px solid #000").click(function(){
alert($(this).attr('id'));
});
}
});
</script>
</head>
<body>
<div id="a">a</div><br />
<div id="b">b</div><br />
<div id="c">c</div><br />
回答by KyleFarris
Seeing as you are hardcoding the elements to be effected anyways, you might as well do it this way as it's likely faster and it's cleaner, IMO:
看到您正在对要影响的元素进行硬编码，您不妨这样做，因为它可能更快，更干净，IMO：
$("#a,#b,#c").css("border","1px solid #000");
$("#a,#b,#c").click(function(){
alert("Link "+this.id+" Alert!");
});
Edit:I didn't see the last part of your question... Sorry. You can also do this:
编辑：我没有看到你问题的最后一部分......对不起。你也可以这样做：
var links = {};
links.a = "Link a";
links.b = "Link b";
links.c = "Link c";
var ids = '';
$.each(function(key,val) {
ids += "#"+key+","; // extra commas are ignored in jQuery
});
$(ids)
.css("border","1px solid #000")
.bind('click',function(){
alert("Link "+this.id+" Alert!");
});
回答by DatPT
Try using:
尝试使用：
$(window).load(function(){
});
:)
:)
