使用列表项的多过滤器逻辑

时间:2018-06-14 20:42:23

标签: jquery

以下代码将搜索无序列表中列表项中的任何重复类<li class="duplicate duplicate">,它将显示结果.show().hide()

当前版本

目前适用于两种情况

第一

显示具有相同类别(至少一个或多个)的任何列表项。

第二

显示列表项类重复项,但我们可以具体说明它是哪个类。例如,查找并显示类.red

的重复项

我已准备就绪。

var $rows = $(".myList").find(".list_entry");

$("#show_red").on("click", function() {
  $rows.hide().filter(".red").show();
});

$("#reset").on("click", function() {
  $rows.show();
});

function uniqueValues ( array ) {
  return array.reduce(function(result, value){
    if (result.indexOf(value) < 0) result.push(value);
    
    return result;
  }, []);
}

$("#duplicates").on('click', function() {
  $rows.hide().filter(function(){
    //get the classes, ignoring repeated whitespace
    var classes = this.getAttribute('class').split(/\s+/);
    //get the unique classes
    var uniqueClasses = uniqueValues(classes);
    //return true if the unique classes are less than the classes
    return classes.length != uniqueClasses.length;
  }).show();
});

$('.show_duplicate').on('click', function () {
  //get the specific class we want to show duplicates for
  var targetClass = this.getAttribute('data-color');
  
  $rows.hide().filter(function(){
    //get the classes, ignoring repeated whitespace
    var classes = this.getAttribute('class').split(/\s+/);
    //get count of targetClass
    var classCount = classes.filter(function(className){ return className === targetClass; }).length;
    //return true if the unique classes are less than the classes
    //and the specific class appears multiple times
    return classCount > 1;
  }).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="duplicates">Display Duplicates</button>
<button id="show_red">Show Only Red</button>
<button id="reset">Reset</button>

</button>

<ul class="myList">
    <li class="list_entry  red red blue class1"><span style="border-color:red;"></span><span style="border-color:red;"></span><span style="border-color: blue;"></span></li>
    <li class="list_entry  red red orange class1A"><span style="color:red;"></span><span style="border-color:red;"></span><span style="color:orange;"></span></li>
    <li class="list_entry  red blue blue class2"><span style="color:red;"></span><span style="color:blue;"></span><span style="color:blue;"></span></li>
    <li class="list_entry  pink class3"><span style="color:pink;"></span></li>
    <li class="list_entry  orange orange red class4"><span style="color:orange;"></span><span style="color:orange;"></span><span style="color:red;"></span></li>
    <li class="list_entry  black white class5"><span style="color:grey;"></span><span style="color:black;"></span></li>
    <li class="list_entry  white white class6"><span style="color:grey;"></span><span style="color:grey;"></span></li>
    <li class="list_entry  black orange class7"><span style="color:black;"></span><span style="color:orange;"></span></li>
</ul>
<style>
span{
    border-style: solid;
    margin: 1px;
    padding: 1px;
}

li{
    margin:15px;
}
</style>

我想要实现的目标

真实示例(游戏示例):

我们有一组按钮可以过滤列表项。列表项将按类属性进行过滤。

示例过滤器按钮

Leveling filters : Level_1, Level_2, Level_3, Level_4, Level_5
Rewards : Experience, AnotherTypeOfExperience, AndAnotherExp
AdditionalRewards : Item1, Item2, Item3
MissionZone : City, Suburbs
MissionType : Defence, Offense

<li class="Level_1 City Defence Item1 Item1 Item3"></li>

的示例

用户选择以下过滤器示例:

Show me (Level_1 OR City OR Defence AND) Item1 OR Item3
Show me (Level_1 AND) Duplicates Of Item1
Show me (Level_2 OR Defence AND) Item2
Show me (Level_1 AND City AND) Item2 OR Duplicates of Item2

总体思路:Show me (Leveling filters $filter_logic MissionZone $filter_logic MissionType (AND -fixed)) Rewards $filter_logic Rewards/AdditionalRewards

So Leveling过滤器,MissionZone,MissionType是过滤器集1 奖励过滤器是过滤器集2。

示例1

filterset1 = [level_1,city];
filterset2 = [Item1,Duplicates];
$filter_logic = AND;

    show : (Level_1 AND City) 1 AND (Item1 AND Duplicates)
             |                   /\            | 
          filterset1         fixed AND    filterset2 

示例2

 filterset1 = [level_1,city];
filterset2 = [Item1,Duplicates];
$filter_logic = AND;

    show : (Level_1 OR City) 1 AND Item1 OR Duplicates
                        |       /\            | 
          filterset1         fixed AND    filterset2 

我不知道怎么开始这个。如果您有任何提示,请分享。

0 个答案:

没有答案