文章/答案/技术大牛

发布

社区首页 >问答首页 >使用jquery通过多个数据属性筛选内容

问使用jquery通过多个数据属性筛选内容
EN

Stack Overflow用户

提问于 2022-09-09 11:31:08

回答 1查看 141关注 0票数 0

使用jQuery和Bootstrap，我创建了一个简单的过滤功能。代码也在jsFiddle下面。但不知何故，它不起作用。尽管事实如此，但仍有一些要素应符合标准。那又有什么问题呢？

$(document).ready(function() {
  $(".filters-1 li").click(function() {
    $(".filters-1 li").removeClass("active");
    $(this).addClass("active");
  });

  $(".filters-2 li").click(function() {
    $(".filters-2 li").removeClass("active");
    $(this).addClass("active");
  });

  $('.filters ul li a').on('click', function() {
    var category_list = [];

    $(this).each(function() {
      var category = $(this).val();
      // console.log(category);
      category_list.push(category);
    });

    if (category_list.length == 0)
      $('.filtered-content').fadeIn();
    else {
      $('.filtered-content').each(function() {
        platform = $(this).attr('data-platform');
        genre = $(this).attr('data-genre');

        if (jQuery.inArray(platform, category_list) > -1 && jQuery.inArray(genre, category_list) > -1)
          $(this).fadeIn('slow');
        else
          $(this).hide();
      });
    }
  });
});

.list-group-item a {
  text-decoration: none;
  color: grey;
}

.active {
  background: pink!important;
  border: red!important;
  -webkit-transition: background-color 200ms linear;
  -ms-transition: background-color 200ms linear;
  transition: background-color 200ms linear;
}

.active a {
  color: #fff;
  font-weight: bold;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap.min.css">
<div class="container py-3">
  <div class="row filters">
    <div class="col">
      <p>Type filters</p>
      <ul class="list-group list-group-horizontal filters-1" data-filter="platform">
        <li class="list-group-item active">
          <a href="#" data-reset="platform">ALL</a>
        </li>
        <li class="list-group-item">
          <a href="#" data-platform="dvd">DVDs</a>
        </li>
        <li class="list-group-item">
          <a href="#" data-platform="book">Books</a>
        </li>
        <li class="list-group-item">
          <a href="#" data-platform="comicbook">Comicbooks</a>
        </li>
      </ul>
    </div>
    <div class="col">
      <p>Genre filters</p>
      <ul class="list-group list-group-horizontal filters-2" data-filter="genre">
        <li class="list-group-item active"><a href="#" data-reset="genre">ALL</a></li>
        <li class="list-group-item"><a href="#" data-genre="comic">Comic</a></li>
        <li class="list-group-item"><a href="#" data-genre="drama">Drama</a></li>
        <li class="list-group-item"><a href="#" data-genre="comedy">Comedy</a></li>
        <li class="list-group-item"><a href="#" data-genre="poetry">Poetry</a></li>
      </ul>
    </div>
  </div>
  <div class="row filtered-content">
    <div class="col-lg-3 py-2 px-2 object" data-platform="dvd" data-genre="drama">
      <img src="https://picsum.photos/id/237/200" alt="Random image" class="img-fluid" />
    </div>
    <div class="col-lg-3 py-2 px-2 object" data-platform="book" data-genre="comedy">
      <img src="https://picsum.photos/id/267/200" alt="Random image" class="img-fluid" />
    </div>
    <div class="col-lg-3 py-2 px-2 object" data-platform="comicbook" data-genre="comic">
      <img src="https://picsum.photos/id/287/200" alt="Random image" class="img-fluid" />
    </div>
    <div class="col-lg-3 py-2 px-2 object" data-platform="comicbook" data-genre="comic">
      <img src="https://picsum.photos/id/537/200" alt="Random image" class="img-fluid" />
    </div>
    <div class="col-lg-3 py-2 px-2 object" data-platform="book" data-genre="comedy">
      <img src="https://picsum.photos/id/937/200" alt="Random image" class="img-fluid" />
    </div>
    <div class="col-lg-3 py-2 px-2 object" data-platform="dvd" data-genre="poetry">
      <img src="https://picsum.photos/seed/picsum/200" alt="Random image" class="img-fluid" />
    </div>
    <div class="col-lg-3 py-2 px-2 object" data-platform="dvd" data-genre="drama">
      <img src="https://picsum.photos/id/117/200" alt="Random image" class="img-fluid" />
    </div>
  </div>
</div>

JSfiddle来了

我已经加倍检查在执行js代码时是否有任何输入，以及检查HTML代码。但不知道为什么不起作用。

html

jquery

filtering

custom-data-attribute

回答 1

Stack Overflow用户

发布于 2022-09-13 09:11:10

谢谢你这么有趣的帖子。我试着重新修改您的代码，以便更好地适应我的测试项目需求。

我想通过增加具有多个数据属性值的可能性来扩展JS功能。所以在实践中，现在您的代码只有在data-attribute="singleValue".时才能工作。

我想要实现的是，当数据-属性=“firstValue secondValue"时，它可以正常工作。正如您将注意到的，这件事是可见的两个过滤列表(在我的例子中，它适用于PC和PS4/PS5)和结果。

HTML：

<div class="container py-3">
  <div class="row filters">
    <div class="col">
      <p>
        Platform filters
      </p>
      <ul class="list-group list-group-horizontal filters-1" data-filter="platform">
        <li class="list-group-item active">
          <a href="#" data-platform="platform">ALL</a></li>
        <li class="list-group-item">
          <a href="#" data-platform="pc-steam pc-epic pc-gog">PC</a></li>
        <li class="list-group-item">
          <a href="#" data-platform="ps4 ps5">PS4 & PS5</a></li>
        <li class="list-group-item">
          <a href="#" data-platform="xbox">Xbox</a></li>
      </ul>
    </div>

    <div class="col">
      <p>
        Type filters
      </p>
      <ul class="list-group list-group-horizontal filters-2" data-filter="type">
        <li class="list-group-item active"><a href="#" data-type="type">ALL</a></li>
        <li class="list-group-item"><a href="#" data-type="rpg">RPG</a></li>
        <li class="list-group-item"><a href="#" data-type="adventure">Adventure</a></li>
        <li class="list-group-item"><a href="#" data-type="shooter">Shooter</a></li>
        <li class="list-group-item"><a href="#" data-type="simulator">Simulator</a></li>
        <li class="list-group-item"><a href="#" data-type="arcade">Arcade</a></li>
      </ul>
    </div>
  </div>

  <div class="row filtered-content">

    <div class="col-lg-3 py-2 px-2 object" data-platform="pc" data-type="rpg">
    PC | RPG 
    </div>

    <div class="col-lg-3 py-2 px-2 object" data-platform="pc" data-type="adventure">
    PC | adventure
    </div>

    <div class="col-lg-3 py-2 px-2 object" data-platform="xbox" data-type="shooter">
     xbox | shooter 
    </div>

    <div class="col-lg-3 py-2 px-2 object" data-platform="ps4 ps5" data-type="simulator">
     ps4 and ps5 | simulator
    </div>

    <div class="col-lg-3 py-2 px-2 object" data-platform="ps5 xbox" data-type="arcade">
     ps5 and xbox | arcade 
    </div>

    <div class="col-lg-3 py-2 px-2 object" data-platform="pc-steam" data-type="adventure shooter">
    pc-steam | adventure shooter
    </div>

    <div class="col-lg-3 py-2 px-2 object" data-platform="pc-epic pc-gog xbox" data-type="rpg adventure">
     pc-epic and pc-gog and xbox | rpg and adventure 
    </div>




  </div>
</div>

联署材料：

(function($){ 
    $(".filters-1 li").click(function() {
        $(".filters-1 li").removeClass("active");
        $(this).addClass("active");
        filter();
      });
    
      $(".filters-2 li").click(function() {
        $(".filters-2 li").removeClass("active");
        $(this).addClass("active");
        filter();
      });
      
      function filter() {
        var category_list = [];
    
        $(".filters ul li.active a").each(function() {
          var category = $(this).attr("data-platform") || $(this).attr("data-type");
          
          console.log(category);
          category_list.push(category);
        });
    
        //console.log(category_list)
        
        if (category_list.length == 0)
          $('.filtered-content > .object').fadeIn();
        else {
          $('.filtered-content > .object').each(function() {
            platform = $(this).attr('data-platform');
            type = $(this).attr('data-type');
    
            console.log(platform, type, jQuery.inArray(platform, category_list))
            if ((jQuery.inArray(platform, category_list) != -1 || jQuery.inArray('platform', category_list) != -1) && (jQuery.inArray(type, category_list) != -1 || jQuery.inArray('type', category_list) != -1))
              $(this).fadeIn('slow');
            else
              $(this).hide();
          });
        }
      }
     
})(jQuery);

CSS：

.list-group-item a {
  text-decoration:none;
  color:grey;
}

.active {
  background:black!important;
  border:black!important;
      -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
    border-radius:0;
}

.active a {
  color:#fff;
  font-weight:bold;
}

.object {
  background:#acacac;
  color:black;
  padding:1em;
  width:10em;
  height:10em;
  margin:1em;
}

从我的知识和理解来看，这是可行的。JSFiddle来了

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73661488

复制

相似问题

问使用jquery通过多个数据属性筛选内容
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jquery通过多个数据属性筛选内容EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jquery通过多个数据属性筛选内容
EN