jQuery событие с одним кликом для нескольких элементов

Question

Есть ли способ выполнить тот же код для разных элементов на странице?

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

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

вместо того, чтобы сделать что-то вроде:

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

Благодарности

Answer 1

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

Или:

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

Answer 2

Просто использовать $('.myclass1, .myclass2, .myclass3') для нескольких селекторов. Кроме того, вам не нужны лямбда-функции для привязки существующей функции к событию click.

Answer 3

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

Убедитесь, что вы поставили пробел как $ (». Class1, пространство here.class2') иначе она не будет работать

Answer 4

Я обычно использую on вместо click. Это позволяет мне добавлять больше слушателей событий к определенной функции.

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

Надеюсь, это поможет!

Answer 5

Другой альтернативы, предполагая, ваши элементы хранятся в виде переменных (которые часто является хорошей идеей, если вы обращаетесь их несколько раз в теле функции):

function disableMinHeight() { 
    var $html = $("html"); 
    var $body = $("body"); 
    var $slideout = $("#slideout"); 

    $html.add($body).add($slideout).css("min-height", 0); 
}; 

принимает преимущество Jquery сцепления и позволяет использовать ссылки.

Answer 6

У меня есть ссылка на объект, содержащий много полей ввода, которые требуют обработки одним и тем же событием. Так что я просто использовать находку(), чтобы получить все внутренние объекты, которые должны иметь это событие

var form = $('<form></form>'); 
// ... apending several input fields 

form.find('input').on('change', onInputChange); 

В случае ваши объекты один уровень вниз по ссылке детей() вместо find() способ можно использовать.

Answer 7

Мы можем закодировать как следующий также, я использовал размытие здесь.

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

Answer 8

В дополнение к превосходным примерам и ответам выше вы также можете «найти» для двух разных элементов, используя свои классы. Например:

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

Это должно выводить «HelloWorld».

Answer 9

Добавить разделенные запятые списка классов, как это:

jQuery(document).ready(function($) { 

$('.class, .id').click(function() { 

// Your code 

    } 

});