多个按钮上的 jQuery ToggleClass

Question

我正在尝试使用 jQuery 切换元素的可见性。该页面应加载所有元素都处于活动状态。然后，当您单击 3 个过滤器按钮之一时，它应该隐藏不匹配的元素。

我可以让它与 addClass 和 removeClass 一起使用，但我希望能够在您单击每个按钮时切换元素打开和关闭。这就是它分崩离析的地方。使用toggleClass，它在第一次单击时起作用，但是当我尝试切换按钮时，这些类都混在一起了。

这是一个使用 removeClass 的working fiddle（无切换）：

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

这是一个non-working fiddle，我试图在其中切换类——一旦你点击一下，它就会混淆：

$(".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()按钮的活动不活动做出决定

1. 您不需要代码冗余。您可以通过为每个按钮指定一个 id 来简化它。

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