使用复选框按类别对文章进行排序答案

【问题标题】：sorting article by class with checkboxes使用复选框按类别对文章进行排序
【发布时间】：2018-03-15 08:43:03
【问题描述】：

我尝试根据团队成员在公司中的职能对他们进行分类。

实际上它使用 AND 函数进行排序：如果成员 A 具有功能 1，成员 B 具有功能 2，并且我选中功能 1 和功能 2 的复选框，它将显示成员 A 和成员 B

但现在我需要一个 OR 函数：

因此，如果成员 A 具有函数 1 和函数 2，成员 B 具有函数 2，并且我选择了函数 1 和函数 2 的复选框，它应该只显示成员 1，因为他同时具有这两个函数

这是我的 jQuery：

jQuery(document).ready(function($) {
$('div.tags').delegate('input:checkbox', 'change', function()
{
     var $lis = $('.results > article').hide();
     //For each one checked
     var numChecked = $('input:checked').each(function()
     {
          $lis.filter('.' + $(this).attr('rel')).show();
     }).length;

    if (!numChecked) $lis.show();
});
});

这是我的 HTML：

<section class="squad results">
    <article class="function1 function2 function3 ">
        <p class="member-name"><b>Member A</b></p>
    </article>
    <article class="function1">
        <p class="member-name"><b>Member B</b></p>
    </article>
    <article class="function2 ">
        <p class="member-name"><b>Member C</b></p>
    </article>
</section>

如何简单地将其更改为按 OR 排序？

谢谢。

【问题讨论】：

标签： jquery html class sorting checkbox

【解决方案1】：

在您的脚本中，您在 .each() 循环中显示过滤后的“rel”。

如果您只是收集所有这些...您将能够将其用作一个选择器（连接字符串）。

jQuery(document).ready(function($) {
  $('div.tags').on('change', 'input:checkbox', function(){
    var $lis = $('.results > article').hide();
    //For each one checked
    var rels = "";
    var numChecked = $('input:checked').each(function(){
      rels += '.' + $(this).attr('rel');  // Concatenate it as a string.
    }).length;

    if (!numChecked){
      $lis.show();
    }else{
      $(rels).show();  // Use the resulting string as a selector.
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="tags">
  <input type="checkbox" rel="function1">Function 1
  <input type="checkbox" rel="function2">Function 2
  <input type="checkbox" rel="function3">Function 3
</div>

<section class="squad results">
  <article class="function1 function2 function3 ">
    <p class="member-name"><b>Member A</b></p>
  </article>
  <article class="function1">
    <p class="member-name"><b>Member B</b></p>
  </article>
  <article class="function2 ">
    <p class="member-name"><b>Member C</b></p>
  <article>
</section>

.delegate() 在 jQuery 3.0 中已弃用...我建议使用具有类似语法的.on()。

【讨论】：