将相同的更改函数应用于多个div?

时间:2021-10-13 22:56:09

What is the best way to bind a functions to multiple div's?

将函数绑定到多个div的最佳方法是什么?

$('#trigger1').change(function(){
   // same code
});

$('#trigger3').change(function(){
   // same code
});

7 个解决方案

#1


6  

Either use class (imo is class the best way)

要么使用类(imo是类最好的方法)

    <div class="trigger"></div>
    <div class="trigger"></div>

$('.trigger').change(function(){

});

or do this

或者这样做

$('#trigger1,#trigger3').change(function(){

});

#2


2  

You can include multiple ids in the same function call:

您可以在同一函数调用中包含多个ID:

$('#trigger1, #trigger3').change(function(){
   // code goes here
});

Or you can give them the same class, e.g. triggerClass and then call it like such:

或者你可以给他们同一个班级,例如triggerClass然后像这样调用它:

$('.triggerClass').change(function(){
   // code goes here
});

#3


2  

add a common class name to those div

为这些div添加一个公共类名

<div class="myClass" id="trigger1">
</div>

<div class="myClass"  id="trigger2">
</div>

here is the script for it

这是脚本

$(".myClass").click(function(){
// your code
});

#4


1  

$('#trigger1, #trigger3').change(some_function);

Or:

$('#trigger1').add('#trigger3').change(some_function);

#5


1  

simply apply a same class to all elements then write

只需将相同的类应用于所有元素然后写入

$('.classname').change(function(){

});

#6


1  

you could use

你可以用

$('#trigger1, #trigger3').change(function(){
   same code
});

to group the triggers

分组触发器

#7


1  

Add a common class:

添加一个公共类:

<div class="rowTrigger">trigger 1</div>
<div class="rowTrigger">trigger 2</div>

Script

脚本

$(function(){
   $("body").on("click", ".rowTrigger", function(e){ 
      e.preventDefault();
      var row = $(this); //row element
   });
});

each "rowTrigger" will fire on the "click" handler, this can be changed to other or multiple events. See http://api.jquery.com/on/ for more detail. The scope of the events handled can be changed by changing "body" to "table" for example, so it will only fire when those 'div' rows from a table are clicked.

每个“rowTrigger”将在“click”处理程序上触发,这可以更改为其他或多个事件。有关更多详细信息,请参见http://api.jquery.com/on/。例如,可以通过将“body”更改为“table”来更改所处理事件的范围,因此只有在单击表中的“div”行时才会触发。

More simply it can be written as (firing for 'click' and 'hover' ... but you get the idea) :

更简单的说,它可以写成(点击'点击'和'悬停'...但你明白了):

$("div.rowTrigger").on("click hover", function(e){
   e.preventDefault();
   var row = $(this); //row element
   //some extra code
}); 

#1


6  

Either use class (imo is class the best way)

要么使用类(imo是类最好的方法)

    <div class="trigger"></div>
    <div class="trigger"></div>

$('.trigger').change(function(){

});

or do this

或者这样做

$('#trigger1,#trigger3').change(function(){

});

#2


2  

You can include multiple ids in the same function call:

您可以在同一函数调用中包含多个ID:

$('#trigger1, #trigger3').change(function(){
   // code goes here
});

Or you can give them the same class, e.g. triggerClass and then call it like such:

或者你可以给他们同一个班级,例如triggerClass然后像这样调用它:

$('.triggerClass').change(function(){
   // code goes here
});

#3


2  

add a common class name to those div

为这些div添加一个公共类名

<div class="myClass" id="trigger1">
</div>

<div class="myClass"  id="trigger2">
</div>

here is the script for it

这是脚本

$(".myClass").click(function(){
// your code
});

#4


1  

$('#trigger1, #trigger3').change(some_function);

Or:

$('#trigger1').add('#trigger3').change(some_function);

#5


1  

simply apply a same class to all elements then write

只需将相同的类应用于所有元素然后写入

$('.classname').change(function(){

});

#6


1  

you could use

你可以用

$('#trigger1, #trigger3').change(function(){
   same code
});

to group the triggers

分组触发器

#7


1  

Add a common class:

添加一个公共类:

<div class="rowTrigger">trigger 1</div>
<div class="rowTrigger">trigger 2</div>

Script

脚本

$(function(){
   $("body").on("click", ".rowTrigger", function(e){ 
      e.preventDefault();
      var row = $(this); //row element
   });
});

each "rowTrigger" will fire on the "click" handler, this can be changed to other or multiple events. See http://api.jquery.com/on/ for more detail. The scope of the events handled can be changed by changing "body" to "table" for example, so it will only fire when those 'div' rows from a table are clicked.

每个“rowTrigger”将在“click”处理程序上触发,这可以更改为其他或多个事件。有关更多详细信息,请参见http://api.jquery.com/on/。例如,可以通过将“body”更改为“table”来更改所处理事件的范围,因此只有在单击表中的“div”行时才会触发。

More simply it can be written as (firing for 'click' and 'hover' ... but you get the idea) :

更简单的说,它可以写成(点击'点击'和'悬停'...但你明白了):

$("div.rowTrigger").on("click hover", function(e){
   e.preventDefault();
   var row = $(this); //row element
   //some extra code
});