如何在单击多个按钮时更改按钮颜色 [英] How to Change Button Colors on Click with Multiple Buttons

问题描述

当页面加载有两个其他不活动的按钮时，我有一个需要激活的按钮.单击非活动按钮时，我需要从另一个按钮中删除活动类，并将其添加到单击的按钮中.

I have a button that needs to be active when the page loads with two other buttons that are not active. When clicking on an inactive button, I need to remove the active class from the other button and add it to the clicked button.

$("button").click(function () {
      clicked = true;
      if (clicked) {
        $(this).toggleClass('active');
        clicked = true;
      } else {
        $(this).removeClass('active');
        clicked = false;
      }
    });

.featuredBtn.active {
  background-color: #bf9471;
  color: white;
}

.featuredBtn {
  width: 250px;
  height: 50px;
  color: #8c8c8c;
  font-weight: 700;
  background-color: #f4efeb;
  border: none;
  letter-spacing: 2px;
  outline: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-12 col-xs-12" style="text-align: center;">
    <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
    <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
    <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
  </div>
</div>

单击新按钮时，应删除具有.active类的按钮.然后，新点击的按钮应采用.active类.

A button with the .active class should be removed when a new button is clicked. The new clicked button should then take the .active class.

推荐答案

该代码无法正常工作，因为(被点击)始终为true-每次函数运行时都会将其设置为true，每个按钮.如果要检查clicked按钮是否处于活动状态，可以设置变量 clicked = this.getAttribute('class').includes('active').如果按钮具有 active 类，则 clicked 将为true.

The code isn't working because (clicked) will always be true - it's being set to true every time the function runs, for every button. If you want to check that the clicked button is active, you can set the variable clicked = this.getAttribute('class').includes('active'). If the button has the active class, clicked will be true.

但是，我们甚至不需要检查被单击的按钮是否处于活动状态-我们可以从所有按钮中删除 active 类，然后将其设置为刚刚使用过的任何一个使用下面的 $(this)选择器单击:

However, we don't even really need to check whether the clicked button is active or not - we can just remove the active class from all buttons and then set it to whichever one has just been clicked using the $(this) selector, below:

$("button").click(function() {
   $("button").removeClass("active");
   $(this).addClass("active");
});

.featuredBtn.active {
  background-color: #bf9471;
  color: white;
}

.featuredBtn {
  width: 250px;
  height: 50px;
  color: #8c8c8c;
  font-weight: 700;
  background-color: #f4efeb;
  border: none;
  letter-spacing: 2px;
  outline: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-12 col-xs-12" style="text-align: center;">
    <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
    <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
    <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
  </div>
</div>

这篇关于如何在单击多个按钮时更改按钮颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！