使用Jquery将函数绑定到多个元素

Question

我有一个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 />

因此,当您单击div#a时,您将获得"链接a"警报,div#b上的"链接b"等等...问题是如果您运行此代码,则单击每个元素将发出警报(结果,"链接c")似乎只为每个div分配了最后一个函数变量...

当然我可以通过编辑函数来使用div的id并使用$(this)来破解它,但是对于cursiosity:有没有办法让这个循环工作？通过为函数中的每个元素创建和分配新函数？

先谢谢......

Answer 1

关于jQuery的好处是它允许链接和绑定多个元素,就像css一样.

$(document).ready(function(){

    $('#a,#b,#c')
        .css("border","1px solid #000")
        .bind('click',function(){
            // do something
         });

});

Answer 2

我相信这就是你所追求的:

$(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) })
    })
});

Answer 3

使用闭包：（“这个”解决方案更优雅，但我发布这个是因为现在删除的答案有一个不起作用的闭包解决方案）

$(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)
        );
    };
});