not - jQuery mismo evento de clic para múltiples elementos

jquery has class

Question

¿Hay alguna forma de ejecutar el mismo código para diferentes elementos en la página?

$(''.class1'').click(function() {
some_function();
});
$(''.class2'').click(function() {
some_function();
});

en lugar de hacer algo como:

$(''.class1'').$(''.class2'').click(function() {
some_function();
});

Gracias

Answer 1

Además de los excelentes ejemplos y respuestas anteriores, también puede hacer un "hallazgo" para dos elementos diferentes utilizando sus clases. Por ejemplo:

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

Esto debería dar salida a "HelloWorld".

Answer 2

Agregue una lista de clases separadas por comas como esta:

jQuery(document).ready(function($) {
$(''.class, .id'').click(function() {
// Your code
}
});

Answer 3

Normalmente uso on lugar de click . Me permite agregar más escuchas de eventos a una función específica.

$(document).on("click touchend", ".class1, .class2, .class3", function () {
//do stuff
});

¡Espero eso ayude!

Answer 4

Otra alternativa, suponiendo que sus elementos se almacenen como variables (lo que suele ser una buena idea si se accede a ellos varias veces en el cuerpo de una función):

function disableMinHeight() {
var $html = $("html");
var $body = $("body");
var $slideout = $("#slideout");
$html.add($body).add($slideout).css("min-height", 0);
};

Aprovecha el encadenamiento de jQuery y te permite usar referencias.

Answer 5

Podemos codificar como siguiendo también, he usado el evento de desenfoque aquí.

$("#proprice, #proqty").blur(function(){
var price=$("#proprice").val();
var qty=$("#proqty").val();
if(price != '''' || qty != '''')
{
$("#totalprice").val(qty*price);
}
});

Answer 6

Simplemente use $(''.myclass1, .myclass2, .myclass3'') para los selectores múltiples. Además, no necesita las funciones lambda para vincular una función existente al evento click.

Answer 7

Tengo un enlace a un objeto que contiene muchos campos de entrada, que requiere ser manejado por el mismo evento. Así que simplemente uso find () para obtener todos los objetos internos que necesitan tener el evento

var form = $(''<form></form>'');
// ... apending several input fields
form.find(''input'').on(''change'', onInputChange);

En caso de que sus objetos estén un nivel por debajo del enlace, se puede usar el método de los niños () en vez de encontrar () .

Answer 8

$(''.class1, .class2'').click(some_function);

Asegúrate de poner un espacio como $ (''. Class1, space here.class2''), de lo contrario no funcionará.

Answer 9

$(''.class1, .class2'').on(''click'', some_function);

O:

$(''.class1'').add(''.class2'').on(''click'', some_function);