个人中心
gpt4 book ai didi

javascript - 将类添加到具有特定类的所有元素

转载 作者：可可西里 更新时间：2023-11-01 01:33:49 24 4
gpt4 key购买 nike

<分区>

我对 javascript 和 jquery 有点陌生，我在以“不错”的方式做我想做的事情时遇到了一些麻烦。

我有一个这样的 HTML 网页:

<div class="list-group">
   <a href="#all" id="category-all" class="list-group-item active">All</a>
   <a href="#" id="category-0" class="list-group-item">Foo</a>
   <a href="#" id="category-1" class="list-group-item">Bar</a>
   <a href="#" id="category-2" class="list-group-item">FooBar</a>
</div>
<div class="row">
   <div class="category-0">element 1</div>
   <div class="category-1">element 1</div>
   <div class="category-1">element 1</div>
   <div class="category-0">element 1</div>
   <div class="category-2">element 1</div>
   <div class="category-0">element 1</div>
   <div class="category-2">element 1</div>
</div>

我想添加某种“过滤器”，如果您单击某个类别链接，其他类别的所有元素都会消失。我设法通过使用“display:none”向我的 css 添加一个名为 invis 的类来做到这一点，然后这样写:

$( ".list-group-item" ).click(function() {
  $(".list-group-item").removeClass('active');
  $( this ).toggleClass("active");
  var test = "." + event.target.id;
  $(".category-0").addClass('invis');
  $(".category-1").addClass('invis');
  $(".category-2").addClass('invis');
  if (test == ".category-0")
    $(".category-0").removeClass('invis');
  if (test == ".category-1")
    $(".category-1").removeClass('invis');
  if (test == ".category-2")
    $(".category-2").removeClass('invis');
  if (test == ".category-all") {
    $(".category-0").removeClass('invis');
    $(".category-1").removeClass('invis');
    $(".category-2").removeClass('invis');
  }
});

这可以完成工作，但我想找到一种“更简洁”的方式来完成这项工作。我该如何改进它？

谢谢!

24 4 0
文章推荐： java - HashMap 空值问题
文章推荐： java - Swing:仅使用 Netbeans 将 JFormattedTextField 设置为数字
文章推荐： javascript - 绑定(bind)到 angular2 中的组件属性
文章推荐： java - Spring 4.1.3注册ObjectMapper序列化Joda DateTime
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com