以下代码将搜索无序列表中列表项中的任何重复类<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。
filterset1 = [level_1,city];
filterset2 = [Item1,Duplicates];
$filter_logic = AND;
show : (Level_1 AND City) 1 AND (Item1 AND Duplicates)
| /\ |
filterset1 fixed AND filterset2
filterset1 = [level_1,city];
filterset2 = [Item1,Duplicates];
$filter_logic = AND;
show : (Level_1 OR City) 1 AND Item1 OR Duplicates
| /\ |
filterset1 fixed AND filterset2
我不知道怎么开始这个。如果您有任何提示,请分享。