jQuery ToggleClass на нескольких кнопках

Question

Я пытаюсь переключать видимость элементов с помощью jQuery.Страница должна загружаться со всеми активными элементами.Затем, когда вы нажимаете одну из 3 кнопок фильтра, она должна скрывать элементы, которые не совпадают.

Я могу заставить его работать с addClass и removeClass, но я хочу иметь возможность включать и выключать элементы, когда вы нажимаете каждую кнопку.Вот где он разваливается.С toggleClass он работает при первом нажатии, но когда я пытаюсь переключать кнопки, классы перепутываются.

Вот рабочая скрипка с использованием removeClass (без переключения):

$(".map-filters .heart").click(function() {
  $('.blue-marker').addClass('d-none');
  $('.green-marker').addClass('d-none');
  $('.red-marker').removeClass('d-none');
});

А вот не-работающая скрипка , где я пытаюсь переключать классы - после того, как вы немного щелкнете по ней, она запутается:

$(".map-filters .heart").click(function() {
  $('.blue-marker').addClass('d-none');
  $('.green-marker').addClass('d-none');
  $('.red-marker').toggleClass('d-none');
});

Что я делаю не так?

Спасибо!

Answer 1

1.Вы установили для всех из них значение по умолчанию:

2. Вы должны принять решение, основываясь на активном, не активном кнопке с hasClass()

. Вам не нужна избыточность кода.Вы можете упростить его, присвоив каждой кнопке идентификатор.

$(".map-filters .filter").click(function() {
$('.active').not(this).removeClass('active');
  $(this).toggleClass('active');
  if ($(this).hasClass('active')){
    var color = $(this).attr('id');
    $("#map").children().addClass('d-none');
    $("." + color + "-marker").toggleClass('d-none');
  }
  else {
  	$("#map").children().removeClass('d-none');
  }
});

.d-none {
  visibility:hidden!important
}
#map {
  border:1px solid #000;
  padding:20px;
}
#map > div {
  width:30px;
  height:30px;
   display:inline-block;
   margin:10px;
}
.map-filters {
  margin-top:50px;
}

.map-filters button {
  opacity:0.5;
}
.map-filters button.active {
  opacity:1;
}

.heart,
.red-marker {background:red;}

.heart-pvl,
.green-marker {background:green;}

.pvl,
.blue-marker {background:blue;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map">
 <div class="blue-marker"></div>
  <div class="red-marker"></div>
  <div class="red-marker"></div>
  <div class="green-marker"></div>
  <div class="blue-marker"></div>
  <div class="green-marker"></div>
</div>

<div class="map-filters">
	<button type="button" class="filter heart" id="red">Heart Locations</button>
	<button type="button" class="filter heart-pvl" id="green">Heart & PVL Locations</button>
	<button type="button" class="filter pvl" id="blue">PVL  Locations</button>
</div>