点击后jQuery添加类

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

但我最好将所有切换按钮设置为常见类，如<button id="toggle1" class="toggle">Toggle 1</button>，并使用以下内容：

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

Answer 2

您可以按类选择：

HTML

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

JS

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