0

В общем, есть 6 блоков, при клике на блок, он должен стать синим, вот мой скрипт

  $(document).ready(function(){
    $(".price__list__wrapper").each(function(){
    $(this).click(function(){
    if ($(this).hasClass('non-active')) {
    $(this).css('backgroundColor','#467EEE').removeClass('non-active');
    }else{
      $(this).css('backgroundColor','#fff').addClass('non-active');
    }
   });
   })
   });

Он работает нормально, но нужно сделать так чтоб при клике на другой блок, цвет у текущего выбранного убирался, а они выделяются каждый по очереди,и при повторном клике цвет убирается. Нужно чтобы работало похоже на radio поесть пока 1 активный остальные нет.

1 ответ 1

2

Добавьте активный цвет в активный класс.

$(document).ready(function() {
    $(".price__list__wrapper").click(function() {
        $(".active").not(this).removeClass('active');
        $(this).toggleClass('active');
    });
});
.price__list__wrapper
{
  width:200px;
  height:50px;
  border-color:black;
  border-style:solid;
  border-width:1px;
  background-color: #DDD;
}

.active
{
  background-color: #467EEE;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price__list__wrapper"></div>
<div class="price__list__wrapper"></div>
<div class="price__list__wrapper"></div>
<div class="price__list__wrapper"></div>

1
  • так просто)) спасибо)) как я сам не догнал...
    – vovaxxx
    28 фев 2017 в 15:37

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.