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

Demo

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

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

<强> Demo for toggleClass 注意 - 这里我评论了.btn:focus css类，因为第二次点击按钮在聚焦时看起来很活跃。

Answer 2

这应该这样做。

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

我认为如果你使用“this”，动作只会在你点击的按钮中生效。

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

2 个答案: