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」アラート、div#b で「リンク b」などのアラートが表示されます...問題は、このコードを実行すると、各要素をクリックするとアラートが表示されることです( 「リンク c」) 結果として、最後の機能バリエーションのみが各 div に割り当てられているようです...

もちろん、関数を編集して div の id を操作し、$(this) を使用することでハッキングできますが、好奇心のために: このサイクルを機能させる方法はありますか? 関数内の各要素に新しい関数を作成して割り当てることによって?

事前にThx...

4

9 に答える 9

33

jQuery の優れた点は、css のように複数の要素をチェーンおよびバインドできることです。

$(document).ready(function(){

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

});
于 2010-01-12T15:00:00.053 に答える
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) })
    })
});
于 2009-05-15T15:02:46.413 に答える
4

クロージャーを使用する:(「この」ソリューションの方がエレガントですが、削除された回答にクロージャーソリューションが機能しなかったため、これを投稿します）

$(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)
        );
    };
});
于 2009-05-15T14:49:58.097 に答える
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 />
于 2009-05-15T14:56:58.597 に答える
0

とにかく影響を受ける要素をハードコーディングしているので、この方法で行う方が、より高速でクリーンである可能性が高いため、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!");
    });
于 2009-05-15T15:05:19.683 に答える
0

使用してみてください：

$(window).load(function(){

});

:)

于 2011-12-08T15:20:51.627 に答える
0

「これ」を使用する必要があります。

$(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!");
        });
    }
});
于 2009-05-15T14:35:03.873 に答える
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 />
于 2009-05-15T14:36:56.600 に答える