jQuery - 将方法应用于多个对象

Question

我想在许多声明的变量上运行相同的方法.

比如说我有:

var searchBtn = $('#search');
var signInBtn = $('#signin');

signInBtn.removeClass('active');
searchBtn.removeClass('active');

我想做这样的事情:

$(signInBtn, searchBtn).removeClass('active');

但我不能,searchBtn在这种情况下被解释为范围(我认为).

我的问题是,如何组合定义的对象并对它们运行相同的方法？

注意:只是为了澄清,我不是在谈论使用ID,类等来定位元素,我在谈论已被定义为变量的对象.

Answer 1

您可以使用add()组合两组jquery对象:

var searchBtn = $('#search');
var signInBtn = $('#signin');

signInBtn.add(searchBtn).removeClass('active');

如果你有多个对象,你可以链接add()s或将对象放在一个数组中并将reduce()它们放在一起(add()不支持多个参数):

[signInBtn,searchBtn,anotherButton].reduce(function(a,b){return a.add(b);})
    .removeClass('active');

示例代码段

$('#deactivate').click(function() {

  var searchBtn = $('#search');
  var signInBtn = $('#signin');
  var exitBtn = $('#exit');

  [searchBtn, signInBtn, exitBtn].reduce(function(a, b) {
      return a.add(b);
    })
    .removeClass('active');

});

.active {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="search" class="active">Search</button>
<button id="signin" class="active">Sign In</button>
<button id="exit" class="active">Exit</button>

<button id="deactivate">Deactivate</button>