Esiste un modo per eseguire lo stesso codice per diversi elementi nella pagina?jQuery evento click per più elementi
$('.class1').click(function() {
some_function();
});
$('.class2').click(function() {
some_function();
});
invece fare qualcosa di simile:
$('.class1').$('.class2').click(function() {
some_function();
});
Grazie
$('.class1, .class2').on('click', some_function);
O:
$('.class1').add('.class2').on('click', some_function);
semplicemente utilizzare $('.myclass1, .myclass2, .myclass3') per più selettori. Inoltre, non hai bisogno di funzioni lambda per associare una funzione esistente all'evento click.
hai bisogno di uno spazio dopo le virgole –
$('.class1, .class2').click(some_function);
assicuratevi di mettere uno spazio come $ ('. Class1, spazio here.class2') altrimenti non funzionerà
Io di solito uso on invece di click. Mi consente di aggiungere più ascoltatori di eventi a una funzione specifica.
$(document).on("click touchend", ".class1, .class2, .class3", function() {
//do stuff
});
Spero che sia d'aiuto!
Mi piace in questo modo meglio. Ma puoi scegliere come target un elemento per classe e uno per ID nella stessa dichiarazione? Ad es. $ (document) .on ("click touchend", ".class1, # id1, .class3", function() { // do stuff }); –
un anno dopo: sì, puoi! @GauravOjha –
Questa tecnica - la creazione di un gestore delegato piuttosto che diretto - offre anche il vantaggio esclusivo di gestire gli eventi innescati dagli elementi corrispondenti creati * dopo * la registrazione del gestore. Vedi: http://api.jquery.com/on/ –
Un'altra alternativa, assumendo gli elementi vengono memorizzati come variabili (che spesso è una buona idea se si sta accedendo loro più volte nel corpo di una funzione):
function disableMinHeight() {
var $html = $("html");
var $body = $("body");
var $slideout = $("#slideout");
$html.add($body).add($slideout).css("min-height", 0);
};
sfrutta jQuery concatenamento e consente usare riferimenti
Ho un collegamento a un oggetto contenente molti campi di input, che richiede di essere gestito dallo stesso evento. Così ho semplicemente utilizzare find() per ottenere tutti gli oggetti interni, che hanno bisogno di avere l'evento
var form = $('<form></form>');
// ... apending several input fields
form.find('input').on('change', onInputChange);
Nel caso in cui gli oggetti sono di un livello verso il basso il link bambini() invece Il metodo find() può essere utilizzato.
Possiamo codificare come segue anche, ho usato l'evento sfocatura qui.
In aggiunta agli esempi eccellenti e alle risposte precedenti, è anche possibile eseguire una ricerca per due elementi diversi utilizzando le proprie classi. Ad esempio:
<div class="parent">
<div class="child1">Hello</div>
<div class="child2">World</div>
</div>
<script>
var x = jQuery('.parent').find('.child1, .child2').text();
console.log(x);
</script>
Questo dovrebbe produrre "HelloWorld".
Aggiungere un elenco separato da virgole delle classi in questo modo:
jQuery(document).ready(function($) {
$('.class, .id').click(function() {
// Your code
}
});
per aiutare gli sviluppatori ricordano questo, anche se un po 'più esteso utilizzo più classi pseudo è lo stesso formato di applicazione di un selettore CSS al momento di definire stili –
Cosa succede se class2 ha memorizzato nella cache come questo var class2 = $ (". Class2")? –
@NeverBackDown '.add() 'funziona anche con oggetti jquery – Eevee