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

【问题标题】：Binding function to multiple elements with Jquery使用 Jquery 将函数绑定到多个元素
【发布时间】：2009-05-15 14:20:17
【问题描述】：

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”等等... 问题是，如果您运行此代码，单击每个元素都会给出 alert("Link c") 作为结果，似乎只有最后一个函数变体被分配给每个 div...

当然，我可以通过编辑函数来处理 div 的 id 并使用 $(this) 来破解它，但是出于好奇：有没有办法让这个循环工作？通过创建新函数并将其分配给函数中的每个元素？

提前谢谢...

【问题讨论】：

仅供参考，如果你链接你的 jQuery 而不是重新选择选择器，它会更整洁一些。 示例： $('#'+x).css('border', '1px solid #000').click(fn);

标签： jquery binding click

【解决方案1】：

jQuery 的好处是它允许链接和绑定多个元素，就像 css 一样。

$(document).ready(function(){

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

});

【讨论】：

【解决方案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) })
    })
});

【讨论】：

IMO 这是除了公认的答案之外唯一合理的答案。通过使用 jQuery 的 each 方法，您在运行时创建了一个闭包；每次执行该函数时。干得好！

【解决方案3】：

使用闭包：（“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(xx){ 
                return function() { alert(xx) };
            }(x)
        );
    };
});

【讨论】：

谢谢，这就是我要找的 :)

【解决方案4】：

工作演示http://jsfiddle.net/FWcHv/

在您的代码中，您多次调用 jQuery 构造函数，即 $('#a') 而不是 $('#b') 和 $('#c') 而您应该像 $('#a,#b,#c') 一样调用

在我的代码中，我使用 $.each 传递了所有 id 并将它们组合起来，在下一步中，我使用存储在变量 x 中的 $('#a,#b,#c') 来优化和简化代码。

我还检查了如果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());
        });
    }
});

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

你需要使用“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!");
        });
    }
});

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

鉴于您无论如何都在硬编码要影响的元素，您不妨这样做，因为它可能更快且更清洁，IMO：

$("#a,#b,#c").css("border","1px solid #000");
$("#a,#b,#c").click(function(){
    alert("Link "+this.id+" Alert!");
});

编辑：我没有看到你问题的最后一部分......对不起。你也可以这样做：

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!");
    });

【讨论】：

【解决方案9】：

尝试使用：

$(window).load(function(){

});

:)

【讨论】：