funzione di legante a più elementi con jQuery

ho questo piccolo problema con jQuery: Ho bisogno di fare qualcosa di simile:funzione di legante a più elementi con 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 />

In modo che quando si fa clic su div # un otterrete "collegare un" avviso , "Link b" su div # b e così via ... Il problema è che se si esegue questo codice, facendo clic su ogni elemento si darà avviso ("Link c") come risultato, sembra che solo l'ultima variazione di funzione è assegnato a ogni div ...

Ovviamente posso modificarlo modificando la funzione per lavorare con ID div e usare $ (this), ma per cursiosity: c'è un modo per far funzionare questo ciclo? Creando e assegnando una nuova funzione a ciascun elemento in funzione?

Thx in anticipo ...

fonte

2009-05-15 Alekc

Proprio A proposito, è un po 'più ordinato, se si concatenano tuo jQuery invece di riselezionare selettore. * Esempio: * '$ ('#' + x) .css ('border', '1px solid # 000'). Click (fn);' –

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

fonte

2009-05-15 14:49:58

Grazie, questo era quello che stavo cercando :) – Alekc

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

fonte

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

fonte

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

fonte

2009-05-15 14:56:58

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

fonte

2009-05-15 15:02:46 duckyflip

IMO questa è l'unica risposta valida diversa da quella accettata. Usando ogni metodo di jQuery si sta creando una chiusura in fuga; per ogni volta che viene eseguita la funzione. Bel lavoro! – James

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

Edit: non ho visto l'ultima parte della tua domanda ... Scusate. È 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!"); 
    });

fonte

2009-05-15 15:05:19 KyleFarris

la cosa bella di jQuery è che permette il concatenamento e vincolante più elementi, proprio come i CSS.

$(document).ready(function(){ 

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

});

fonte

2010-01-12 15:00:00

Provare a utilizzare:

$(window).load(function(){ 

});

fonte

2011-12-08 15:20:51 DatPT

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

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 passato tutti gli id utilizzando $ .each e li ho combinati e nel passaggio successivo ho usato $('#a,#b,#c') memorizzato nella variabile x per rendere il codice ottimizzato e facile.

Ho fatto anche un controllo che se links{} è vuota non sarà processo utilizzando variabile 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()); 
     }); 
    } 
});

fonte

2013-07-20 07:22:25

funzione di legante a più elementi con jQuery

risposta

Problemi correlati