Переключение цветов блока по клику

279

01 марта 2017, 21:23

В общем, есть 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 активный остальные нет.

Answer 1

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

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