Bindungsfunktion, um mehrere Elemente mit Jquery

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

  •  22-08-2019
  •  | 
  •  

Frage

Ich habe dieses kleine Problem mit Jquery: Ich brauche so etwas zu tun: 

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

So dass, wenn Sie auf div # klicken, um eine Sie erhalten alert "einen Link", "Link-b" auf div # b und so weiter ... Das Problem ist, dass, wenn Sie diesen Code ausführen, auf jedes Element klicken Alarm geben ( „Link-c“) als Ergebnis, so scheint es, dass nur die letzte Funktion Variation zu jedem div zugeordnet ist ...

Natürlich kann ich es Hack durch die Funktion Bearbeitung mit divs id zu arbeiten und mit $ (this), aber für cursiosity: Gibt es einen Weg, um diesen Zyklus Arbeit zu machen? Durch das Erstellen und eine neue Funktion auf jedes Element in Funktion zuweisen?

Thx im voraus ...

War es hilfreich?

Lösung

Verwenden Sie einen Verschluss: (a „diese“ Lösung elegante, aber ich bin Entsendung dies, weil eine nun gelöscht Antwort eine Verschlusslösung hatte, die nicht funktionierte) 

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

Andere Tipps

das schöne an jQuery ist es erlaubt die Verkettung und mehrere Elemente wie CSS-Bindung. 

$(document).ready(function(){

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

});

Ich glaube, das ist, was Sie nach: 

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

Arbeits Demo http://jsfiddle.net/FWcHv/

in Sie Code, den Sie jQuery Konstruktor rufen oft heißt $('#a') als $('#b') und $('#c') stattdessen sollten Sie wie $('#a,#b,#c') nennen

In meinem Code ich habe durch alle ids an ihnen vorüber $ .each und kombiniert mit und im nächsten Schritt habe ich $('#a,#b,#c') in Variable x gespeichert verwendet der Code optimiert und einfach zu machen.

Ich habe auch einen Scheck, wenn links{} leer ist, wird es nicht mit variabler i verarbeitet 

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

Sie müssen "dieses".

verwenden, 
$(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 />

Sehen, wie Sie die Elemente zu sowieso vorgenommen werden, können Sie auch tun es auf diese Weise, wie es ist wahrscheinlich schneller und es ist sauberer, IMO: 

$("#a,#b,#c").css("border","1px solid #000");
$("#a,#b,#c").click(function(){
    alert("Link "+this.id+" Alert!");
});

Edit: Ich habe nicht den letzten Teil Ihrer Frage sehen ... Sorry. Sie können dies auch tun: 

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

Versuchen Sie es mit: 

$(window).load(function(){

});

:)

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top