以下代码将搜索任何重复的类<li class="duplicate duplicate">在无序列表中的列表项中，它将显示结果.show() and .hide()其他的。
当前版本
目前它适用于两种场景
First
它显示具有相同类别（至少一个或多个）的任何列表项。
Second
显示列表项类重复项，但我们可以指定它是哪个类。例如查找并显示类 .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
因此 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
我什至不知道如何开始。如果您有任何提示，请分享。
