css 基于多个过滤器的网站内容过滤

cuxqih21 于 2023-03-24 发布在其他

关注(0)|答案(1)|浏览(93)

我已经开始学习JS和jQuery，并且在一个我无法解决的挑战中发现了一个障碍。我对这个相当陌生，所以解释一下会很有帮助。
Fiddle展示了我所取得的成就：（它可以工作，但不像预期的那样）：Fiddle

var filters1 = {
  "A": {
    "active": true
  },
  "B": {
    "active": true
  },
};

var filters2 = {
  "1": {
    "active": true
  },
  "2": {
    "active": true
  },
};

$(document).on('click', '.tag-filter', function() {
  var id = $(this).attr('id');
  if (id in filters1) {
    if (filters1[id].active) {
      filters1[id].active = false;
      $('.' + id).css("display", "none");
      $(this).addClass("active-tag-filter");
    } else {
      filters1[id].active = true;
      $('.' + id).css("display", "inline-block");
      $(this).removeClass("active-tag-filter");
    }
  } else if (id in filters2) {
    if (filters2[id].active) {
      filters2[id].active = false;
      $('.' + id).css("display", "none");
      $(this).addClass("active-tag-filter");
    } else {
      filters2[id].active = true;
      $('.' + id).css("display", "inline-block");
      $(this).removeClass("active-tag-filter");
    }
  }
});

.tag {
  display: inline-block;
  background-color: black;
  color: white;
  margin: 4px;
  text-align: center;
  min-width: 32px;
  min-height: 32px;
}

.tag-filter {
  display: inline-block;
  background-color: red;
  color: black;
  margin: 4px;
  text-align: center;
  min-width: 32px;
  min-height: 32px;
}

.active-tag-filter {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class='tag-filter' id='A'>A</div>
  <div class='tag-filter' id='B'>B</div>
  <div class='tag-filter' id='1'>1</div>
  <div class='tag-filter' id='2'>2</div>
</div>
<br>
<div>
  <div class='tag A 1'>A1</div>
  <div class='tag A 2'>A2</div>
  <div class='tag B 1'>B1</div>
  <div class='tag B 2'>B2</div>
</div>

我想要实现的目标：

好榜样胜过千篇作品;我想要一个像这样的过滤器：点击几下，你就会明白我的意思。
如果有更好的解释：
1.当激活第一组（字母）的标签过滤器时，仅显示带有该字母的标签。例如，当单击标签过滤器A时，仅显示标签A1和A2。
1.当来自同一组的另一个标签过滤器被激活时，结果是求和。例如，当点击标签过滤器A，然后点击B时，显示标签A1、A2、B1、B2。
1.当用户从两组中选择标签过滤器时，依次单击A〉B〉1。例如，应显示A1，A2〉显示A1，A2，B1，B2〉显示A1和B1。
如果有人想为我写代码那就太好了，但更重要的是，这是一个好的方法吗？有没有更好的方法来进行这样的过滤？
先谢了！

css

来源：https://stackoverflow.com/questions/75813380/website-content-filtering-based-on-more-than-one-filter

1条答案

按热度按时间

p1tboqfb1#

OP在这里.一个评论者建议一个数组，我使用，除了hide（）和show（）方法，我知道.缺少的组件是join（）和filter（）方法，这对我来说是新的.这对我来说是很好的学习经验，感谢帮助.
最后，这里是工作小提琴，过滤工作，因为我的意图。Fiddle

$(document).ready(function() {
  $(".filter-btn").click(function() {
    var filterValue = $(this).attr("data-filter");
    
    if ($(this).hasClass("active")) 
    {
      $(this).removeClass("active");
    } 
    else 
    {
      $(this).addClass("active");
    }
    
    var activeFilters1 = [];
    var activeFilters2 = [];
    $("#filter-container1 .filter-btn.active").each(function() {
      activeFilters1.push($(this).attr("data-filter"));
    });
    $("#filter-container2 .filter-btn.active").each(function() {
      activeFilters2.push($(this).attr("data-filter"));
    });
    
    if (activeFilters1.length === 0 && activeFilters2.length === 0) {
      // Show all items if no filters are active
      $(".item").show();
    } else if (activeFilters1.length > 0 && activeFilters2.length === 0) {
      // Show only items that match any of the active filters in the first group
      $(".item").hide().filter("." + activeFilters1.join(",.")).show();
    } else if (activeFilters1.length === 0 && activeFilters2.length > 0) {
      // Show only items that match any of the active filters in the second group
      $(".item").hide().filter("." + activeFilters2.join(",.")).show();      
    } else {
      // Show all items that match any of the active filters in the first group
      // Then refine the selection to only those that also match the active filters in the second group
      $(".item").hide().filter("." + activeFilters1.join(",.")).filter("." + activeFilters2.join(".")).show();
    }
  });
});

.item {
  display: block;
}

.active {
  background-color: #555;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div id="filter-container1">
  <button class="filter-btn" data-filter="tagA">A</button>
  <button class="filter-btn" data-filter="tagB">B</button>
</div>

<div id="filter-container2">
  <button class="filter-btn" data-filter="tag1">1</button>
  <button class="filter-btn" data-filter="tag2">2</button>
</div>

<div id="item-container">
  <div class="item tagA tag1">Item tagged A and 1</div>
  <div class="item tagA tag2">Item tagged A and 2</div>
  <div class="item tagB tag1">Item tagged B and 1</div>
  <div class="item tagB tag2">Item tagged B and 2</div>
</div>
</html>

赞(0）回复(0）举报 2023-03-24

我来回答

css 基于多个过滤器的网站内容过滤

我想要实现的目标：

1条答案

相关问题

热门标签

最新问答