jQuery 多个元素的jQuery相同点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1313373/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery same click event for multiple elements
提问by Kelvin
Is there any way to execute same code for different elements on the page?
有没有办法对页面上的不同元素执行相同的代码？
$('.class1').click(function() {
some_function();
});
$('.class2').click(function() {
some_function();
});
instead to do something like:
而是做类似的事情：
$('.class1').$('.class2').click(function() {
some_function();
});
Thanks
谢谢
回答by Eevee
$('.class1, .class2').on('click', some_function);
Or:
或者：
$('.class1').add('.class2').on('click', some_function);
This also works with existing objects:
这也适用于现有对象：
const $class1 = $('.class1');
const $class2 = $('.class2');
$class1.add($class2).on('click', some_function);
回答by bzin
I normally use oninstead of click. It allow me to add more events listeners to a specific function.
我通常使用on而不是click. 它允许我向特定函数添加更多事件侦听器。
$(document).on("click touchend", ".class1, .class2, .class3", function () {
//do stuff
});
Hope it helps!
希望能帮助到你！
回答by coolguy
$('.class1, .class2').click(some_function);
Make sure you put a space like $('.class1,space here.class2') or else it won't work.
确保你放置了一个像 $('.class1,space here.class2') 这样的空格，否则它不会工作。
回答by code_burgar
Simply use $('.myclass1, .myclass2, .myclass3')for multiple selectors. Also, you dont need lambda functions to bind an existing function to the click event.
仅$('.myclass1, .myclass2, .myclass3')用于多个选择器。此外，您不需要 lambda 函数将现有函数绑定到单击事件。
回答by pimbrouwers
Another alternative, assuming your elements are stored as variables (which is often a good idea if you're accessing them multiple times in a function body):
另一种选择，假设您的元素存储为变量（如果您在函数体中多次访问它们，这通常是一个好主意）：
function disableMinHeight() {
var $html = $("html");
var $body = $("body");
var $slideout = $("#slideout");
$html.add($body).add($slideout).css("min-height", 0);
};
Takes advantage of jQuery chaining and allows you to use references.
利用 jQuery 链接并允许您使用引用。
回答by frzsombor
If you have or want to keep your elements as variables (jQuery objects), you can also loop over them:
如果您有或想要将元素保留为变量（jQuery 对象），您还可以循环遍历它们：
var $class1 = $('.class1');
var $class2 = $('.class2');
$([$class1,$class2]).each(function() {
$(this).on('click', function(e) {
some_function();
});
});
回答by Dev
Add a comma separated list of classes like this :
添加一个逗号分隔的类列表，如下所示：
jQuery(document).ready(function($) {
$('.class, .id').click(function() {
// Your code
}
});
回答by Nitin Pawar
We can code like following also, I have used blur event here.
我们也可以像下面这样编码，我在这里使用了模糊事件。
$("#proprice, #proqty").blur(function(){
var price=$("#proprice").val();
var qty=$("#proqty").val();
if(price != '' || qty != '')
{
$("#totalprice").val(qty*price);
}
});
回答by Arkhaine
In addition to the excellent examples and answers above, you can also do a "find" for two different elements using their classes. For example:
除了上面的优秀示例和答案之外，您还可以使用它们的类对两个不同的元素进行“查找”。例如：
<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>
This should output "HelloWorld".
这应该输出“HelloWorld”。
回答by Andrii Bogachenko
I have a link to an object containig many input fields, which requires to be handled by the same event. So I simply use find()to get all the inside objects, that need to have the event
我有一个指向包含许多输入字段的对象的链接，该对象需要由同一事件处理。所以我只是使用find()来获取所有需要事件的内部对象
var form = $('<form></form>');
// ... apending several input fields
form.find('input').on('change', onInputChange);
In case your objects are one level down the link children()instead find()method can be used.
如果您的对象向下一级，则可以使用链接children()而不是find()方法。
