Bootstrap/Javascript/JQuery 使按钮一次改变一种颜色答案

【问题标题】：Bootstrap/Javascript/JQuery make buttons change color one a timeBootstrap/Javascript/JQuery 使按钮一次改变一种颜色
【发布时间】：2015-08-02 23:52:22
【问题描述】：

我在一个页面中有多个（引导）按钮，我只希望其中一个在单击时改变颜色。因此，如果之前单击了一个按钮并收到了另一种颜色，现在单击了一个新按钮，则前一个按钮应返回正常颜色，而新按钮应更改。（希望我解释正确）

我现在可以使用 JQuery 来更改元素类，例如。单击时从 btn-primary 更改为 btn-success 类（从而更改颜色），但这需要按钮具有 ID。

$("#td_id").attr('class', 'newClass');

1) 那么，我如何遍历所有按钮，检查它们的类并在需要时更改它？

2) 有没有更优雅的解决方案？

【问题讨论】：

标签： javascript jquery html twitter-bootstrap-3

【解决方案1】：

利用一个类。首先remove 来自所有带有class="btn" 的元素的类，然后添加到被点击的特定button。

$('.btn').on('click',function(){
 $('.btn').removeClass('clr').addClass('clr2');
 $(this).removeClass('clr2').addClass('clr');
})

见fiddle。

【讨论】：

【解决方案2】：

1- 给所有按钮一个通用类（例如：“unique-button”）

2- 当您单击一个按钮时，遍历所有（“唯一按钮”）按钮以删除名为“当前”的类

3- 分配点击的按钮“当前”类

4- 使用 css 为您的“.unique-button.current”类提供单击时所需的按钮颜色

这样，只有一个按钮会被点击颜色，当另一个按钮被点击时，所有按钮都被重置并且被点击的一个获得“当前”类，给它颜色。

$(".unique-button").on("click", function() {
    $(".unique-button").each(function() {
        $(this).removeClass("current");
    });
    $(this).addClass("current");

});

// css .unique-button.current { 颜色：绿色； }

【讨论】：

【解决方案3】：

试试这个：

HTML

<input type="button" class="btn btn-default" value="hello">
<input type="button" class="btn btn-default" value="hello">
<input type="button" class="btn btn-default" value="hello">

JS

// this will find all input with type button
// You can place any selector, in this case your button
// better put class name for all button, and target it name
$('input[type="button"]').on('click', function(){ 
  $('input[type="button"]').removeClass('btn-warning');
  $(this).toggleClass('btn-warning');
});

DEMO

【讨论】：

【解决方案4】：

这是最优雅的方法：-

$('.button').click(function() {
  $('.button').removeClass('btn-success').addClass('btn-primary ');
  $(this).addClass('btn-success').removeClass('btn-primary ');
});

【讨论】：

【解决方案5】：

你可以这样做。只需根据需要调整选择器以选择您关心的按钮。

$('.btn').click(function() {
    $(this).toggleClass('btn-primary').toggleClass('btn-success');
});

【讨论】：

当新按钮被点击时，这不会改变前一个按钮的类...
仅当其动态添加时。
不，您只针对当前元素（this），因此它不会从先前单击的按钮中删除类 btn-success..