javascript - 如何在单击多个按钮时更改按钮颜色

Question

我有一个按钮需要在页面加载时处于事件状态，而另外两个按钮不活动。单击非事件按钮时，我需要从另一个按钮中删除事件类并将其添加到单击的按钮。

$("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 类。

Answer 1

代码不起作用，因为 (clicked) 将始终为 true - 每次函数运行时，每个按钮都会将其设置为 true。如果要检查单击的按钮是否处于事件状态，可以设置变量 clicked = this.getAttribute('class').includes('active')。如果按钮具有 active 类，则 clicked 将为真。

但是，我们甚至真的不需要检查点击的按钮是否处于事件状态 - 我们只需从所有按钮中删除 active 类，然后将其设置为刚刚激活的那个使用 $(this) 选择器点击，如下:

$("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>