如何使用JavaScript/jQuery在一个页面上激活多个按钮？

Question

我想构建一个页面,用户可以通过单击按钮选择多个项目.我已经使用了焦点和活动类来使按钮改变外观但是使用我当前的代码我只能激活一个按钮.我正在寻找能够让用户激活多个按钮的代码.

HTML

<button class="btn btn-1">
    button 1
</button>

<button class="btn btn-1">
    button 2
</button>

<button class="btn btn-1">
    button 3
</button>

<button class="btn btn-1">
    button 4
</button>

CSS

.btn:hover {
  background-color: rgba(52, 152, 219,0.6);
}

.btn:focus {
  background-color: rgba(52, 152, 219,0.6);
}

.btn:active, .btn:visited {
  background-color: rgba(52, 152, 219,0.6);
}

.active {
  background-color: rgba(52, 152, 219,0.6); 
}

这是我一直用来尝试为已经点击的按钮添加永久活动类的jQuery代码.这还没有用.

$(document).ready(function(){ 
    $('.btn').click(function() { 
        $('.btn').addClass('active');
    });
});

Answer 1

您应该使用$(this)向active单击的按钮添加类

$(document).ready(function(){ 
    $('.btn').click(function() { 
       $(this).addClass('active');// use this here
    });
});

演示

编辑 - 根据@Regent的建议,您可以使用toggleClass在按钮点击时激活和取消激活,使用下面的代码

$(document).ready(function(){ 
     $('.btn').click(function() { 
        $(this).toggleClass('active');
    });
 });

toggle for toggleClass 注意 - 这里我评论了.btn:focuscss类,因为第二次单击按钮看起来是活动的,因为它是聚焦的.