如何使用多个按钮更改按钮颜色

问题描述 投票:3回答:5

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

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

javascript jquery css html5
5个回答
3
投票

代码无法正常工作,因为(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>

1
投票

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

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

0
投票

我希望这可以解决你的工作检查;不得不只是addremove

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

希望它有助于解决您的问题


0
投票

我要添加到这些中的唯一额外的东西是首先检查类active。其他一切主要是个人风味,因为有几种方法可以做到这一点,这里的答案似乎涵盖了它

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

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

0
投票

您可以使用'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>
© www.soinside.com 2019 - 2024. All rights reserved.