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为true。

但是，我们甚至不需要检查被单击的按钮是否处于活动状态-我们可以从所有按钮中删除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>

Answer 2

我建议通过使用类名称“ featuredBtn”更精确地指定元素。这样可以避免将事件绑定到页面上的所有按钮上

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

Answer 3

我希望这可以解决您的工作，请检查一下；只需要add和remove类

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

希望这将有助于解决您的问题

Answer 4

我要添加到其中任何一项的唯一额外的事情是首先对类active进行检查。其他所有内容大多都是个人风格，因为有几种方法可以做到这一点，而且这里的答案似乎涵盖了

$('.featuredBtn').on('click', function() {
    let featureBtn = $('.featuredBtn');

    if(featureBtn.hasClass('active')) {
        featureBtn.removeClass('active');
        $(this).addClass('active');
    }
});

Answer 5

您可以使用'hasClass'来解决这一问题。

$("button").click(function() {
  if ($(this).hasClass("active")) {
    $(this).removeClass("active");
  } else {
    $(".active").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>

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

5 个答案: