多个元素的jQuery相同单击事件答案

【问题标题】：jQuery same click event for multiple elements多个元素的jQuery相同单击事件
【发布时间】：2010-11-21 18:03:30
【问题描述】：

有没有办法为页面上的不同元素执行相同的代码？

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

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

而不是做类似的事情：

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

谢谢

【问题讨论】：

标签： jquery events

【解决方案1】：

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

或者：

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

这也适用于现有对象：

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

【讨论】：

为了帮助开发人员记住这一点，即使使用更多伪类进行更多扩展，它与在定义样式时应用 css 选择器的格式相同
如果 class2 像这样缓存 var class2=$(".class2") 会怎样？
@NeverBackDown .add() 也适用于 jquery 对象
请注意，即使其中一个选择器返回未定义，这仍会将事件附加到存在的 jquery 对象。
有人能解释一下$('.class1, .class2') 和$('.class1').add('.class2') 之间的真正区别吗？在什么情况下我们应该使用.add()？

【解决方案2】：

我通常使用on 而不是click。它允许我向特定函数添加更多事件侦听器。

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

【讨论】：

我更喜欢这种方式。但是，您可以在同一个声明中按类定位一个元素并按 ID 定位一个元素吗？例如$(document).on("click touchend", ".class1, #id1, .class3", function () { //do stuff });
一年后：是的，你可以！ @GauravOjha
这种技术——创建一个委托的，而不是直接的处理程序——还提供了处理由在注册处理程序之后创建的匹配元素触发的事件的独特优势。见：api.jquery.com/on

【解决方案3】：

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

确保你放了一个像 $('.class1,space here.class2') 这样的空格，否则它将不起作用。

【讨论】：

【解决方案4】：

只需将$('.myclass1, .myclass2, .myclass3') 用于多个选择器。此外，您不需要 lambda 函数来将现有函数绑定到单击事件。

【讨论】：

逗号后面需要一个空格

【解决方案5】：

另一种选择，假设您的元素存储为变量（如果您在函数体中多次访问它们，这通常是一个好主意）：

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

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

利用 jQuery 链接并允许您使用引用。

【讨论】：

【解决方案6】：

如果您拥有或想要将元素保留为变量（jQuery 对象），您也可以循环它们：

var $class1 = $('.class1');
var $class2 = $('.class2');

$([$class1,$class2]).each(function() {
    $(this).on('click', function(e) {
        some_function();
    });
});

【讨论】：

【解决方案7】：

我们也可以像下面这样编码，我在这里使用了模糊事件。

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

【讨论】：

【解决方案8】：

添加一个逗号分隔的类列表，如下所示：

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

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

//  Your code

    }

});

【讨论】：

【解决方案9】：

我有一个指向包含许多输入字段的对象的链接，这需要由同一事件处理。所以我只是使用 find() 来获取所有需要事件的内部对象

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

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

如果您的对象位于链接的下一级，则可以使用 children() 代替 find() 方法。

【讨论】：

【解决方案10】：

除了上面的优秀示例和答案之外，您还可以使用它们的类对两个不同的元素进行“查找”。例如：

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

【讨论】：