logo标签列表

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

jquerybindingclick
9

我有一个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”警报，“链接b”在div#b上等等...
问题在于，如果您运行此代码，则单击每个元素将给出alert（“Link c”）作为结果，似乎只有最后一个函数变体被分配给每个div...
当然，我可以通过编辑函数以使用div的id并使用$(this)来解决它，但是出于好奇：是否有一种方法使此循环工作？通过在函数中创建和分配新函数给每个元素？
提前感谢...
2
只是提供信息，如果您链接您的jQuery而不是重新选择选择器，它会更加整洁。 示例： $('#'+x).css('border', '1px solid #000').click(fn); - Will Morgan
9个回答
33

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

$(document).ready(function(){

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

});
6
我相信这是你想要的内容：

我相信这就是你所需要的：

$(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) })
    })
});
2
在我看来，除了被接受的答案之外，这是唯一正确的答案。通过使用jQuery的each方法，你可以在运行时创建一个闭包；每次执行函数时都会如此。干得好！ - James
4
使用闭包：（使用“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)
        );
    };
});
2

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

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

在我的代码中，我使用了$.each将所有的id遍历一遍，并将它们组合起来，然后在下一步中我使用了$('#a,#b,#c')存储在变量x中，以使代码更加优化和易于理解。

我还进行了检查，如果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());
        });
    }
});
1
<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 />
0
你需要使用 "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!");
        });
    }
});
0
<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 />
0

既然你已经在硬编码要影响的元素，那么我认为你最好这样做，因为它可能更快，而且更清晰：

$("#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!");
    });
0

尝试使用：

$(window).load(function(){

});

：）

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接