结合功能与Jquery的多个元素

StackOverflow https://stackoverflow.com/questions/868975

  •  22-08-2019
  •  | 
  •  

题

我有这样的小问题与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＃点击你会得到DIV＃B“与一个”警报“链接B”等等... 问题是，如果你运行这段代码，点击每一个元素会给警报（“链接C”）的结果，似乎只有最后一个函数变化分配给每个格...

当然，我可以通过编辑功能与div的ID工作，使用$攻击它（这一点），但对于cursiosity：有没有办法让这个循环的工作？通过创建和在功能上分配一个新的功能，以每个元素

Thx提前...

有帮助吗？

解决方案

使用封闭：（一“本”解决方案更优雅，但我张贴这是因为现在的答案被删除了，没有工作的封闭溶液）

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

其他提示

关于jQuery的的好处是它允许链接和结合多个元件一样的CSS。

$(document).ready(function(){

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

});

我相信这是你追求的：

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

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

在你的代码你调用jQuery的构造多次即$('#a')比$('#b')和$('#c')，而不是你应该叫喜欢$('#a,#b,#c')

在我的代码我已通过使用$。每所有的ID的传递和合并它们，并在接下来的步骤i已经使用存储在变量$('#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());
        });
    }
});

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

您需要使用 “这个”。

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

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

看到因为你是硬编码的元素进行反正影响，你不妨做这种方式，因为它很可能更快，它的清洁，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!");
    });

尝试使用：

$(window).load(function(){

});

：）

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top