我能在Jquery的.on中使用变量吗？

Question

我有一个div里面有3个按钮，我想给它们添加相同的点击监听器。这些按钮有一些操作，因此我首先在函数的开头将它们保留为变量，然后我想使用这些变量添加监听器。有没有什么方法可以实现？

HTML代码如下：

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

- LilacEilim

Answer 1

You can use .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>

- Carsten Løvbo Andersen

---

注意：add函数接受多个参数，且无需在开头加 $()（add返回一个新对象，不会修改被调用对象）：$aBtn.add($bBtn).add($cBtn).on(...)。 - T.J. Crowder

非常正确，只是一个老习惯 :) - Carsten Løvbo Andersen

Answer 2

使用add函数。

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

- Suresh Atta

Answer 3

以下代码不使用变量，但有时您可以简单地在包装多个元素的选择器上绑定事件。

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

使用此代码，每个按钮都附加了事件处理程序。当您单击一个元素时，this 引用该元素，如在此jsfiddle中展示的那样：https://jsfiddle.net/3uwx15vg/1/ 作为变量的替代方法，您甚至可以链接事件处理程序。

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

- Lex Lustor

---

这可能是我描述的特定问题的一个好解决方案，但如果您在包装器下有更多的按钮，而您不希望侦听器附加到它们，那么您必须为那些您需要的按钮指定一个新类。但总体上，我理解您的观点。 - LilacEilim

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

Answer 4

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'一样将它们连接起来即可。

- guradio