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

How can I activate multiple buttons on one page using JavaScript/jQuery?

本文关键字：一个 激活 按钮 JavaScript jQuery 何使用      更新时间：2023-09-26

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

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

您应该使用$(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');
    });
 });

toggleClass演示注意-我在这里评论了.btn:focus css类，因为第二次单击按钮时它看起来是活动的。

这样就可以了。

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

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

相关文章：