Как изменить цвета кнопок при нажатии с несколькими кнопками

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 при каждом запуске функции для каждой кнопки.Если вы хотите проверить, активна ли нажатая кнопка, вы можете установить переменную 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>

Answer 2

Я предлагаю более точно указать элемент, используя имя класса "featuredBtn".Это позволит избежать привязки события ко всем кнопкам на странице

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

Answer 3

Вы можете использовать '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>

Answer 4

Единственное, что я хотел бы добавить к любому из них, - это сначала выполнить проверку для класса active.Все остальное - в основном личный вкус, потому что есть несколько способов сделать это, и ответы здесь, кажется, покрывают это

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

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

Answer 5

Я надеюсь, что это решит вашу работу. должны просто 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>

надеюсь, это поможет решить вашу проблему