我可以使用变量以某种方式与.on Jquery

我有一个div内的3个按钮，我想添加相同的点击监听器的所有人。我对这些按钮有一些操作，所以我首先将它们作为变量添加到函数的乞求中，然后我想使用这些变量添加on监听器。有什么办法吗？的HTML看起来像这样：我可以使用变量以某种方式与.on Jquery

<div class="wrapper"> 
    <button class="a"></button> 
    <button class="b"></button> 
    <button class="c"></button> 
</div>

的JS：

var $wrapper = $('.wrapper'), 
    $aBtn = $wrapper.find('.a'), 
    $bBtn = $wrapper.find('.b'), 
    $cBtn = $wrapper.find('.c'); 

//The working but less neat solution 
$('.wrapper .a, .wrapper .b, .wrapper .c').on('click', func); 

//What I want 
($aBtn, $bBtn, $cBtn).on('click', func);

来源

2017-03-07 LilacEilim

您可以使用.add() // Ref link

var $wrapper = $('.wrapper'), 
 
    $aBtn = $wrapper.find('.a'), 
 
    $bBtn = $wrapper.find('.b'), 
 
    $cBtn = $wrapper.find('.c'); 
 

 
//What I want 
 
$($aBtn).add($bBtn).add($cBtn).on('click', func); 
 

 
function func(){alert($(this).attr("class"))}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <button class="a">a</button> 
 
    <button class="b">b</button> 
 
    <button class="c">c</button> 
 
</div>

来源

2017-03-07 07:44:55

注意：'add'接受多个参数，开始时不需要'$（）'（'add'返回一个新对象，它不会修改它调用的内容）：'$ aBtn.add（ $ bBtn）.add（$ cBtn）.on（...）' –

非常真实，只是一个老习惯:) –

使用添加功能

$aBtn.add($bBtn,$cBtn).on('click', func);

来源

2017-03-07 07:42:32

下面的代码没有使用变量，但你可以有时干脆绑定上选择事件包装多个元素

$('.wrapper button').on('click', func);

有了这个代码，每个按钮都有附加了事件处理程序。当你点击一个元素，这引用的元素像展示在此的jsfiddle：https://jsfiddle.net/3uwx15vg/1/

作为替代变量，你甚至可以链事件处理程序

$('.wrapper button').on('click', func).on('blur', func);

来源

2017-03-07 07:46:59

这可能是我描述的具体问题的一个很好的解决方案，但如果你有更多的包装下的按钮，你不希望听众附加到他们你必须指定一个新的类对你做的。但我总体上明白你的观点。 – LilacEilim

@LilacEilim：的确如此。我通常将我的处理程序附加到具有特定数据属性的元素（很少使用特定类前缀js- *） –

var $wrapper = $('.wrapper'), 
 
    $aBtn = ('.wrapper .a '), 
 
    $bBtn = ('.wrapper .b '), 
 
    $cBtn = ('.wrapper .c '); 
 

 
//The working but less neat solution 
 
//$('.wrapper .a, .wrapper .b, .wrapper .c').on('click', func); 
 

 
//What I want 
 
$($aBtn+", "+$bBtn+", "+$cBtn).on('click', func); 
 

 
function func() { 
 
    alert($(this).text()) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <button class="a">1</button> 
 
    <button class="b">2</button> 
 
    <button class="c">3</button> 
 
</div>

如果你可以改变选择器只需连接它们，就像你用'.wrapper .a, .wrapper .b, .wrapper .c'

来源

2017-03-07 07:58:44 guradio

我可以使用变量以某种方式与.on Jquery

回答

相关问题