funzione di legame a più elementi con Jquery
Domanda
ho questo piccolo problema con jQuery: Ho bisogno di fare qualcosa di simile:
$(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 />
In modo che quando si fa clic su un div # otterrete "Link a" allerta, "Link b" div # B e così via ... Il problema è che se si esegue questo codice, cliccando su ogni elemento darà alert ( "Link c"), come risultato, sembra che solo l'ultima variante funzione viene assegnato a ogni div ...
Certo che posso incidere modificando la funzione di lavorare con id del div e utilizzando $ (questo), ma per cursiosity: c'è un modo per fare questo lavoro ciclo? Con la creazione e l'assegnazione di una nuova funzione per ogni elemento in funzione?
Thx in anticipo ...
Soluzione
Con una chiusura: (a "questa" soluzione è più elegante, ma sto postando questo perché una risposta ora cancellato aveva una soluzione di chiusura che non ha funzionato)
$(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)
);
};
});
Altri suggerimenti
la cosa bella di jQuery è che permette il concatenamento e vincolante più elementi, proprio come css.
$(document).ready(function(){
$('#a,#b,#c')
.css("border","1px solid #000")
.bind('click',function(){
// do something
});
});
Credo che questo sia quello che stai dopo:
$(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) })
})
});
in voi codice che si sta chiamando jQuery costruttore molte volte cioè $('#a')
di $('#b')
e $('#c')
invece si dovrebbe chiamare come $('#a,#b,#c')
Nel mio codice ho attraversato tutto utilizzando $ .each della id e li combinato e nella fase successiva ho usato x
memorizzato nella variabile links{}
per rendere il codice ottimizzato e facile.
Ho fatto anche un controllo che se i
è vuoto non si elabora utilizzando variabile <=>
$(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 />
È necessario utilizzare "questo".
$(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 />
Visto che si sta hardcoding gli elementi da effettuare in ogni modo, si potrebbe anche fare in questo modo, come è probabile più veloce ed è più pulito, IMO:
$("#a,#b,#c").css("border","1px solid #000");
$("#a,#b,#c").click(function(){
alert("Link "+this.id+" Alert!");
});
Modifica non ho visto l'ultima parte della tua domanda ... Mi dispiace. È anche possibile fare questo:
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!");
});
Provare a utilizzare:
$(window).load(function(){
});
:)