Bootstrap/Javascript/JQuery让按钮依次变色

Question

我在页面上有多个(bootstrap)按钮，我想当点击其中一个按钮时只更改该按钮的颜色。因此，如果之前点击了一个按钮并且它变成了另一种颜色，现在点击了新的按钮，则先前的按钮应返回到正常颜色，新的按钮应更改颜色。

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

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

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

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

- buster

Answer 1

这是最优雅的做法：-

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

- Dipesh Rana

Answer 2

利用一个类。首先从所有带有“class =“btn”的元素中删除类，然后添加到点击的特定按钮中。

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

请参见 fiddle。

- Zee

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

演示

- Norlihazmey Ghazali

Answer 4

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

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

- Daniel A. White

---

当单击新按钮时，这不会更改先前按钮的类。 - Dipesh Rana

只有在动态添加时才会添加。 - Daniel A. White

不，你只是针对当前元素（this）进行操作，所以它不会从之前点击的按钮中删除btn-success类。 - Dipesh Rana

Answer 5

1- 给所有按钮一个共同的类名（例如："unique-button"）

2- 当你点击一个按钮时，遍历所有（"unique-button"）按钮以删除名为“current”的类

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

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

这样，只有一个按钮会有单击颜色，当单击其他按钮时，所有按钮都会重置，并且单击的按钮获得“current”类，从而赋予它颜色。

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

});

// css .unique-button.current { color: green; }

// CSS 唯一按钮.当前 { 颜色：绿色; }

- Georgio