Binding-Funktion, um mehrere Elemente mit JQuery

Ich habe dieses kleine Problem mit Jquery: Ich so etwas zu tun:Binding-Funktion, um mehrere Elemente mit 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 />

So dass, wenn Sie auf div # a klicken Sie erhalten „verknüpfen“ alert , "Link b" auf div # b und so weiter ... Das Problem ist, dass, wenn Sie diesen Code ausführen, klicken Sie auf jedes Element wird Warnung ("Link c") als Ergebnis, scheint es, dass nur die letzte Funktionsvariante Jedem Div ...

Natürlich kann ich es hacken, indem ich die Funktion editiere, um mit divs ID zu arbeiten und $ (this) zu verwenden, aber für cursiosity: gibt es eine Möglichkeit, diesen Zyklus zum Laufen zu bringen? Durch Erstellen und Zuweisen einer neuen Funktion zu jedem Element in Funktion?

Thx im Voraus ...

Quelle

2009-05-15 Alekc

Gerade FYI mit nicht verarbeiten, es ist ein bisschen übersichtlicher, wenn Sie Ihre jQuery-Kette anstelle der Wähler von Neuwahl. * Beispiel: * '$ ('#' + x) .css ('border', '1px solid # 000') klicken (fn);' –

Verwenden Sie einen Verschluss: (a "diese" Lösung ist elegant, aber ich bin dieses Posting, weil ein nun gelöscht Antwort eine Verschlusslösung hatte, die nicht funktionierten)

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

Quelle

2009-05-15 14:49:58

Danke, das war, was ich gesucht habe :) – Alekc

Sie müssen "this" 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!"); 
     }); 
    } 
});

Quelle

2009-05-15 14:35:03 gradbot

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

Quelle

2009-05-15 14:36:56

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

Quelle

2009-05-15 14:56:58

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

Quelle

2009-05-15 15:02:46 duckyflip

IMO Dies ist die einzige vernünftige Antwort außer der akzeptierten. Wenn Sie jQuery für jede Methode verwenden, erstellen Sie während des Laufs eine Schließung. für jedes Mal, wenn die Funktion ausgeführt wird. Gute Arbeit! – James

Sehen als Sie hartzucodieren die Elemente sowieso durchgeführt werden, können Sie auch tun es auf diese Weise, wie es 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 ... Es tut uns leid. 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!"); 
    });

Quelle

2009-05-15 15:05:19 KyleFarris

die nette Sache über 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 
     }); 

});

Quelle

2010-01-12 15:00:00

Versuchen Sie es mit:

$(window).load(function(){ 

});

Quelle

2011-12-08 15:20:51 DatPT

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

in Sie Code, den Sie jQuery Konstruktor rufen oft dh $('#a') als $('#b') und $('#c') stattdessen sollten Sie anrufen wie $('#a,#b,#c')

In meinem Code habe ich alle IDs mit $ .Each durchlaufen und kombiniert sie und im nächsten Schritt habe ich $('#a,#b,#c') in Variable x gespeichert, um den Code optimiert und einfach zu machen.

Ich habe auch einen Scheck, wenn links{} leer ist es variable 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()); 
     }); 
    } 
});

Quelle

2013-07-20 07:22:25

Binding-Funktion, um mehrere Elemente mit JQuery

Antwort

Verwandte Themen