jQuery点击后添加class

Question

我有一个问题。我怎样才能只使用一个像下面这样的小代码来切换多个 div。有什么想法吗？

var a = ["1","2","3"];
  $('#toggle'+a).click(function () {
  $('#slide'+a).toggleClass("show");
});

Answer 1

您必须遍历 a 数组才能将点击事件绑定到所有按钮：

var a = ["1", "2", "3"];
a.forEach(function(i) {
    $('#toggle' + i).click(function () {
        $('#slide' + i).toggleClass("show");
    });
});

但我最好将所有切换按钮设置为通用 class，例如 <button id="toggle1" class="toggle">Toggle 1</button>，然后使用如下内容：

$('.toggle').click(function () {
    var index = this.id.replace('toggle', '');
    $('#slide' + index).toggleClass("show");
});

Answer 2

您可以 select 通过 class:

<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>

$('.foo').click(function () {
 $(this).toggleClass('bar');
});

jQuery add class after clicking