Question

我在一个div中有3个按钮，我想为所有这些按钮添加相同的点击监听器。我对这些按钮有一些操作，所以我首先将它们作为变量放在函数的乞讨中，然后我想使用这些变量添加on listener。有什么办法吗？ 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);

Answer 1

您可以使用.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>

Answer 2

使用添加功能

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

Answer 3

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

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

使用此代码，每个按钮都附加一个事件处理程序。单击元素时， this 引用此jsfiddle中显示的元素：https://jsfiddle.net/3uwx15vg/1/

作为变量的替代方法，您甚至可以链接事件处理程序

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

Answer 4

＆＃13;

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())
}

＆＃13;

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

＆＃13;

如果您可以更改选择器，只需像'.wrapper .a, .wrapper .b, .wrapper .c'

那样连接它们

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

4 个答案: