代码之家 › 专栏 › 技术社区 › Alekc

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

click binding jquery

Alekc · 技术社区 · 15 年前

我对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”等等… 问题是,如果您运行此代码,单击每个元素将发出警报(“link c”),结果似乎只有最后一个函数变量被分配给每个分区…

当然,我可以通过编辑函数使用DIV的ID并使用$(this)对其进行破解,但是对于草率的做法:有没有办法让这个循环工作?通过为函数中的每个元素创建和分配一个新函数?

THX提前…

9 回复 | 直到 11 年前

Sam Hasler 15 年前

使用一个闭包:(一个“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)
        );
    };
});

Big J 15 年前

jquery的好处在于它允许像css一样链接和绑定多个元素。

$(document).ready(function(){

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

});

duckyflip 15 年前

我相信这就是你想要的:

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

Tushar Gupta - curioustushar 11 年前

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

在代码中,您多次调用jquery构造函数,即 $('#a') 比 $('#b') 和 $('#c') 相反,你应该像 $('#a,#b,#c')

在我的代码中,我已经通过了所有使用$.的ID,并将它们组合在一起,在下一步中我使用了 $(‘A,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());
        });
    }
});

Ben Koehler 15 年前

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

gradbot 15 年前

你需要用“这个”。

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

user434917 15 年前

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

KyleFarris 15 年前

既然你正在硬编码任何方式都会受到影响的元素,你也可以这样做,因为它可能更快,而且更干净,我的意思是:

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

Basic 13 年前

尝试使用:

$(window).load(function(){

});