代码之家 › 专栏 › 技术社区 › LBF

多个按钮上的jQuery ToggleClass

html jquery javascript

LBF · 技术社区 · 5 年前

我试图用jQuery切换元素的可见性。页面应加载所有活动元素。然后,当你点击3个过滤器按钮中的一个,它应该隐藏不匹配的元素。

我可以让它与addClass和removeClass一起工作,但我希望能够这样做切换

working fiddle 使用removeClass(无切换):

$(".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');
});

我做错什么了?

谢谢!

0 回复 | 直到 5 年前

Evik Ghazarian 5 年前

1.您已将它们的默认值设置为“活动”。

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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

4 月前

Alex · 在轻量级中同时解构和不解构变量

4 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

4 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

5 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

5 月前