Bootstrap/Javascript/JQuery使按钮一次改变一个颜色

Bootstrap/Javascript/JQuery make buttons change color one a time

本文关键字：一次 改变 一个 颜色 按钮 Javascript Bootstrap JQuery      更新时间：2023-09-26

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

我现在知道可以使用JQuery更改元素类，例如，当单击时从btn-primary更改为btn-success类(从而更改颜色)，但这需要按钮有一个ID。

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

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

这是最优雅的方法:-

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

试试这个:

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

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

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

看到 小提琴。

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

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

1-给你所有的按钮一个共同的类(例如:"unique-button")

2-当你点击一个按钮时，遍历所有("unique-button")按钮以移除名为"current"的类

3-指定被点击按钮为"当前"类

4-用css给你的"。unique-button"。"当前"类单击按钮时想要的颜色

这样，只有一个按钮会被点击颜色，当另一个按钮被点击时，所有按钮都被重置，被点击的按钮获得"当前"类，赋予它颜色。

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

});

//css.unique-button。当前{颜色:绿色;}

相关文章：