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＃Aをクリックしたときにはそうでのdiv＃bの上の警告、「リンクB」「リンク」とを取得するように... 問題は、このコードを実行する場合は、各要素をクリックすると、結果として警告（「リンクC」）を与えることで、

...最後の機能の変化は、各div要素に割り当てられているようです

もちろん私はdiv要素のidと連携する機能を編集し、$（this）を使用して、それをハックが、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/する

あなたがあなたの代わりにあなたが$('#a')のように呼び出す必要がありますjQueryのコンストラクタに$('#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());
        });
    }
});

<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