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

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

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

来源

2014-09-12 Stijn

您应该使用$(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类，因为在第二次点击按钮，它的重点是积极查找。

来源

2014-09-12 12:44:23

只需要提一下：如果您想要停用再次点击按钮，您可以使用toggleClass而不是addClass。 – Regent 2014-09-12 12:47:34

工作前。（在铬中测试）http://jsfiddle.net/ledlogic/um01c513/ – ledlogic 2014-09-12 12:49:34

这应该做到这一点。

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

我想如果你用“这个”的动作只需要在你点击本身的按钮效果。

来源

2014-09-12 13:11:21 cubanGuy

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

回答

相关问题