html 在使用多个选项进行过滤时，使用isotope.js定义AND关系

p8ekf7hl  于 2023-10-14  发布在  其他
关注(0)|答案(1)|浏览(119)

我有两个包含独特的过滤器选项的内容类型区域。这些是：

  1. type
  2. tag
    我试图利用isotope.js，以实现双重过滤布局，但它总是给最后点击过滤器优先级。
    我希望它的运作方式是：
    1.如果只选择了一个tag，则显示具有该tag的结果
    1.如果选择了多个tag，则显示具有任何这些标签的结果（两个标签不需要同时存在于卡上）
    1.如果选择了type，则仅显示该type下的结果
    1.如果选择了一个type和一个tag，则显示所选type上存在tag的帖子的结果
    1.如果选择了一个type和多个tags，则显示属于该类型的具有这些tags之一的帖子。
    1.如果选择了多个type和一个或多个tag，则显示其中tag存在于任一类型上的帖子
    例如，使用我下面的演示，这里有一些用例：
    1.如果我点击“视频演示和图尔斯”，我应该看到两个视频职位（卡1和3）-作品
    1.如果我点击“视频演示和图尔斯”，然后“Ansible”，我应该只看到卡3 -不工作
    1.如果我点击“博客&新闻”，我应该看到3卡（卡2，4，5）-作品
    1.如果我点击“博客和新闻”，然后点击“Ansible”，我应该会看到卡片4和5
    1.如果我点击“博客和新闻”，“Ansible”，然后“自动化”，我应该看到卡2，4和5
    然而，在我当前的演示中，尽管控制台日志似乎在正确的行上，但它并没有按照我的意图执行。
  1. document.addEventListener("DOMContentLoaded", function () {
  2.   var container = document.querySelector(".grid");
  3.   var gridItems = container.querySelectorAll(".grid-item");
  4.   const optionLinks = document.querySelectorAll(".rSidebar__options-li");
  6.   var iso = new Isotope(container, {
  7.     itemSelector: ".resourceCard",
  8.     layoutMode: "fitRows",
  9.     transitionDuration: "0.5s"
  10.   });
  12.   var filters = {};
  14.   function concatValues(obj) {
  15.     var value = [];
  16.     for (var prop in obj) {
  17.       value.push(obj[prop]);
  18.     }
  19.     return value.flat().join(", ");
  20.   }
  22.   function handleFilterClick(event, filters) {
  23.     var listItem = event;
  24.     var filterGroup = listItem
  25.       .closest(".rSidebar__options")
  26.       .getAttribute("data-filter-group");
  27.     var data_filter = listItem.getAttribute("data-filter");
  29.     if (filterGroup === "type") {
  30.       filters[filterGroup] = [data_filter];
  31.     } else {
  32.       if (!filters[filterGroup]) {
  33.         filters[filterGroup] = [];
  34.       }
  36.       if (listItem.classList.contains("selected")) {
  37.         filters[filterGroup].push(data_filter);
  38.       } else {
  39.         filters[filterGroup] = filters[filterGroup].filter(
  40.           (tag) => tag !== data_filter
  41.         );
  42.       }
  43.     }
  45.     // Combine the type filter with the selected tag filters using an AND relationship
  46.     var filterValues = [];
  48.     // Handle type filter
  49.     if (filters["type"]) {
  50.       filterValues.push("." + filters["type"][0]);
  51.     }
  53.     // Handle tags filter if it's defined
  54.     if (filters["tag"]) {
  55.       var selectedType = filters["type"][0];
  56.       filters["tag"].forEach((tag) => {
  57.         filterValues.push("." + selectedType + "." + tag);
  58.       });
  59.     }
  61.     var finalFilter = filterValues.join(", ");
  62.     console.log(finalFilter);
  64.     iso.arrange({
  65.       filter: finalFilter
  66.     });
  67.   }
  69.   optionLinks.forEach(function (optionLink) {
  70.     optionLink.addEventListener("click", function (event) {
  71.       event.preventDefault();
  72.       this.classList.toggle("selected");
  73.       handleFilterClick(this, filters);
  74.     });
  75.   });
  76. });
  1. .post {
  2.   padding: 100px;
  3. }
  5. .rSidebar__box {
  6.   margin-bottom: 30px;
  7. }
  8. .rSidebar__options {
  9.   padding-left: 0;
  10. }
  11. .rSidebar__options-li {
  12.   margin-bottom: 17px;
  13.   display: flex;
  14.   align-items: center;
  15.   cursor: pointer;
  16.   width: fit-content;
  17. }
  18. .rSidebar__options-li.selected .rSidebar__options-square {
  19.   background-color: #185A7D;
  20. }
  21. .rSidebar__options-square {
  22.   height: 20px;
  23.   width: 20px;
  24.   transition: all 0.5s ease;
  25.   border: 2px solid #000000;
  26. }
  27. .rSidebar__options-label {
  28.   margin-left: 10px;
  29. }
  31. .grid {
  32.   display: flex;
  33.   flex-wrap: wrap;
  34.   margin: -14px 0 0 -14px;
  35. }
  36. .grid-item {
  37.   box-sizing: border-box;
  38.   width: calc(45% - 14px);
  39.   margin: 14px 0 18px 14px;
  40.   border: 2px solid black;
  41.   padding: 20px;
  42. }
  1. <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  2. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  4. <div class="post">
  5.   <div class="container">
  6.     <div class="row justify-content-between">
  8.       <!-- SIDEBAR -->
  9.       <div class="col-3">
  10.         <div class="rSidebar">
  12.           <!-- tags -->
  13.           <div class="rSidebar__box">
  14.             <span class="rSidebar__label d-block fw-bold">Filter by tag</span>
  15.             <ul class="rSidebar__options button-group" data-filter-group="tag">
  16.               <li class="rSidebar__options-li" data-filter="ansible">
  17.                 <span class="rSidebar__options-square"></span>
  18.                 <span class="rSidebar__options-label d-block" data-filter="ansible">Ansible</span>
  19.               </li>
  20.                 <li class="rSidebar__options-li" data-filter="automation">
  21.                 <span class="rSidebar__options-square"></span>
  22.                 <span class="rSidebar__options-label d-block" data-filter="automation">Automation</span>
  23.               </li>
  24.             </ul>
  25.           </div>
  27.           <!--  type -->
  28.           <div class="rSidebar__box">
  29.             <span class="rSidebar__label d-block fw-bold">Filter by type</span>
  30.             <ul class="rSidebar__options button-group" data-filter-group="type">
  31.               <li class="rSidebar__options-li" data-filter="blogs-and-news">
  32.                 <span class="rSidebar__options-square"></span>
  33.                 <span class="rSidebar__options-label d-block" data-filter="blogs-and-news">Blog & News</span>
  34.               </li>
  35.               <li class="rSidebar__options-li" data-filter="video-demos-tour">
  36.                 <span class="rSidebar__options-square"></span>
  37.                 <span class="rSidebar__options-label d-block" data-filter="video-demos-tours">Video Demos & Tours</span>
  38.               </li>
  39.             </ul>
  40.           </div>
  41.           <!-- end -->
  42.         </div>
  43.       </div>
  44.       <!-- END -->
  46.       <!-- GRID -->
  47.       <div class="col-7">
  48.         <div class="grid">
  49.           <article class="resourceCard grid-item video-demos-tour automation"><span class="resourceCard__body-title">Card 1<br>Type: Video Demo & Tour<br>Tag: Automation</span></article>
  50.           <article class="resourceCard grid-item blogs-and-news"><span class="resourceCard__body-title">Card 2<br>Type: Blog & News<br>Tag: Automation</span></article>
  51.           <article class="resourceCard grid-item video-demos-tour automation ansible"><span class="resourceCard__body-title">Card 3<br>Type: Video Demo & Tour<br>Tags: Automation, Ansible</span></article>
  52.           <article class="resourceCard grid-item blogs-and-news ansible"><span class="resourceCard__body-title">Card 4<br>Type: Blog & News<br>Tag: Ansible</span></article>
  53.           <article class="resourceCard grid-item blogs-and-news ansible"><span class="resourceCard__body-title">Card 5<br>Type: Blog & News<br>Tags: Ansible, Automations</span></article>
  54.         </div>
  55.       </div>
  56.       <!-- END -->
  58.     </div>
  59.   </div>
  60. </div>
Html

1条答案

按热度按时间
hgqdbh6s

hgqdbh6s1#

如果我理解正确的话，你想用OR组合同一组的合并过滤器，用AND组合组之间的过滤器：

  1. {a,b} x {1,2} -> a1|a2|b1|b2

在选择器中（如Isotope所使用的），这将是：

  1. .a.1, .a.2, .b.1, .b.2

你可以通过查看每个组，将每个元素与之前构建的选择器组合来构建它：

  1. function buildSelectors(filterObject){
  2.   return Object.values(filterObject)  // extract filter arrays
  3.     .reduce(
  4.       (selectors, groupValues) => 
  5.         groupValues.length === 0 ? selectors :  // skip empty groups
  6.         groupValues.flatMap(v => selectors.map(s => `${s}.${v}`)) // combine group elements with existing selectors into new list
  7.       , [''])
  8.     .join(', ')
  9. }

如果你更喜欢常规循环，这是这样的：

  1. function buildSelectors(filterObject){
  2.   let selectors = ['']
  3.   for (const group of Object.values(filterObject)){
  4.     if (group.length === 0) {
  5.       continue
  6.     }
  7.     const mergedSelectors = []
  8.     for (const value of group) {
  9.       for (const selector of selectors) {
  10.         mergedSelectors.push(`${selector}.${value}`)
  11.       }
  12.     }
  13.     selectors = mergedSelectors
  14.   }
  15.   return selectors.join(',')
  16. }

一些一般提示和建议：

  • 卡2和卡5错过了automation类，不确定这是否是故意的
  • 使用所有现有组的空数组示例化filter对象，这样就可以避免您以后弄清楚组属性是否已经存在
  • 将DOM操作与过滤数据操作分离，使代码更易于维护
  • 考虑为Filter创建一个类，以便进一步按关注点分割代码

看看更新的片段：

  1. class Filter{
  2.   groups = {
  3.     tag: [],
  4.     type: [],
  5.   }
  6.   
  7.   updateGroup(group, value, isSelected) {
  8.     const isActiveValue = this.groups[group].includes(value)
  9.     if (isSelected && !isActiveValue){
  10.        this.groups[group].push(value)
  11.     }
  12.     if (!isSelected && isActiveValue){
  13.        this.groups[group] = this.groups[group].filter(v => v !== value)
  14.     }
  15.   }
  17.   buildSelector(){
  18.     return Object.values(this.groups).reduce(
  19.       (selectors, groupValues) => 
  20.         groupValues.length === 0 ? selectors :
  21.         groupValues.flatMap(v => selectors.map(s => `${s}.${v}`))
  22.       , [''])
  23.     .join(', ')
  24.   }
  25.   
  26.   updateSelector(group, value, isSelected){
  27.     this.updateGroup(group, value, isSelected)
  28.     return this.buildSelector()
  29.   }
  30. }
  32. document.addEventListener("DOMContentLoaded", function () {
  34.   const iso = new Isotope('.grid', {
  35.     itemSelector: ".resourceCard",
  36.     layoutMode: "fitRows",
  37.     transitionDuration: "0.5s"
  38.   });
  40.   const activeFilter = new Filter()
  41.   
  42.   function onOptionLinkClick(event){
  43.     event.preventDefault();
  44.     
  45.     this.classList.toggle("selected");
  46.     const isSelected = this.classList.contains("selected")
  47.     
  48.     const group = this
  49.       .closest(".rSidebar__options")
  50.       .getAttribute("data-filter-group");
  51.     const value = this.getAttribute("data-filter");
  53.     const filter = activeFilter.updateSelector(group, value, isSelected)
  54.     iso.arrange({filter})
  55.     
  56.     console.clear()
  57.     console.log('Current filter:', filter)
  58.   }
  60.   const optionLinks = document.querySelectorAll(".rSidebar__options-li");
  61.   optionLinks.forEach(optionLink => optionLink.addEventListener("click", onOptionLinkClick));
  62. })
  1. .post {
  2.   padding: 10px;
  3. }
  5. .rSidebar__box {
  6.   margin-bottom: 30px;
  7. }
  8. .rSidebar__options {
  9.   padding-left: 0;
  10. }
  11. .rSidebar__options-li {
  12.   margin-bottom: 17px;
  13.   display: flex;
  14.   align-items: center;
  15.   cursor: pointer;
  16.   width: fit-content;
  17. }
  18. .rSidebar__options-li.selected .rSidebar__options-square {
  19.   background-color: #185A7D;
  20. }
  21. .rSidebar__options-square {
  22.   height: 20px;
  23.   width: 20px;
  24.   transition: all 0.5s ease;
  25.   border: 2px solid #000000;
  26. }
  27. .rSidebar__options-label {
  28.   margin-left: 10px;
  29. }
  31. .grid {
  32.   display: flex;
  33.   flex-wrap: wrap;
  34.   margin: -14px 0 0 -14px;
  35. }
  36. .grid-item {
  37.   box-sizing: border-box;
  38.   width: calc(45% - 14px);
  39.   margin: 14px 0 18px 14px;
  40.   border: 2px solid black;
  41.   padding: 20px;
  42. }
  1. <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  2. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  4. <div class="post">
  5.   <div class="container">
  6.     <div class="row justify-content-between">
  8.       <!-- SIDEBAR -->
  9.       <div class="col-3">
  10.         <div class="rSidebar">
  11.           
  12.           <!-- tags -->
  13.           <div class="rSidebar__box">
  14.             <span class="rSidebar__label d-block fw-bold">Filter by tag</span>
  15.             <ul class="rSidebar__options button-group" data-filter-group="tag">
  16.               <li class="rSidebar__options-li" data-filter="ansible">
  17.                 <span class="rSidebar__options-square"></span>
  18.                 <span class="rSidebar__options-label d-block" data-filter="ansible">Ansible</span>
  19.               </li>
  20.                 <li class="rSidebar__options-li" data-filter="automation">
  21.                 <span class="rSidebar__options-square"></span>
  22.                 <span class="rSidebar__options-label d-block" data-filter="automation">Automation</span>
  23.               </li>
  24.             </ul>
  25.           </div>
  27.           <!--  type -->
  28.           <div class="rSidebar__box">
  29.             <span class="rSidebar__label d-block fw-bold">Filter by type</span>
  30.             <ul class="rSidebar__options button-group" data-filter-group="type">
  31.               <li class="rSidebar__options-li" data-filter="blogs-and-news">
  32.                 <span class="rSidebar__options-square"></span>
  33.                 <span class="rSidebar__options-label d-block" data-filter="blogs-and-news">Blog & News</span>
  34.               </li>
  35.               <li class="rSidebar__options-li" data-filter="video-demos-tour">
  36.                 <span class="rSidebar__options-square"></span>
  37.                 <span class="rSidebar__options-label d-block" data-filter="video-demos-tours">Video Demos & Tours</span>
  38.               </li>
  39.             </ul>
  40.           </div>
  41.           <!-- end -->
  42.         </div>
  43.       </div>
  44.       <!-- END -->
  46.       <!-- GRID -->
  47.       <div class="col-7">
  48.         <div class="grid">
  49.           <article class="resourceCard grid-item video-demos-tour automation"><span class="resourceCard__body-title">Card 1<br>Type: Video<br>Tag: Automation</span></article>
  50.           <article class="resourceCard grid-item blogs-and-news automation"><span class="resourceCard__body-title">Card 2<br>Type: Blog<br>Tag: Automation</span></article>
  51.           <article class="resourceCard grid-item video-demos-tour automation ansible"><span class="resourceCard__body-title">Card 3<br>Type: Video<br>Tags: Automation, Ansible</span></article>
  52.           <article class="resourceCard grid-item blogs-and-news ansible"><span class="resourceCard__body-title">Card 4<br>Type: Blog<br>Tag: Ansible</span></article>
  53.           <article class="resourceCard grid-item blogs-and-news ansible automation"><span class="resourceCard__body-title">Card 5<br>Type: Blog<br>Tags: Ansible, Automation</span></article>
  54.           <article class="resourceCard grid-item video-demos-tour ansible"><span class="resourceCard__body-title">Card 6<br>Type: Video <br>Tags: Ansible</span></article>
  55.         </div>
  56.       </div>
  57.       <!-- END -->
  59.     </div>
  60.   </div>
  61. </div>

这有意义吗，有帮助吗？

展开查看全部
赞(0）分享  回复(0）举报  2023-10-14
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com