单维度多项筛选

首页 > 单维度多项筛选

短 刷 阅 编 历

丨前言

• 这是一个涉及js代码和css代码的较复杂的工具。

丨前期准备

• 目前筛选代码默认预置到WIKI，无需复制

1-将如下代码添加到您的WIKI的mediawiki:common.js里

$(function() {
	//解决手机上按键选项hover效果不消失的问题
	 $("body").on("touchstart", function(e) {});
	
	//筛选页面列表筛选
	$('.filter li').on('mouseenter touchstart',function(e) {
		$(this).children().addClass('hover');
	});
	
	$('.filter li').on('mouseleave touchend',function(e) {
		$(this).children().removeClass('hover');
	});
	
	$('.filter li').on('click',function(e) {
		if(!$(this).parent().attr('data-maxselect')) {
			$(this).siblings().children().removeClass('active');
			$(this).children().toggleClass('active');
		} else {
			if($(this).siblings().find('.active').length >= $(this).parent().attr('data-maxselect')) {
				return false;
			} else {
				$(this).children().toggleClass('active');
			}
		}
		var item = new Array();
		$('.filter').find('.active').parent().each(function() {
			if($('#wiki_table_select tbody').length == 0) {
				var data_type = $(this).parent().attr('data-type');
				item.push("[data-param" + data_type + "='" + $(this).attr("data-value") + "']");
			} else {
				item.push($(this).attr("data-value"));
			}
		});
		
		
		if(item.length !== 0) {
			if($('#wiki_table tbody').length != 0) {
				$('#wiki_table tbody').children().hide(400);
				$('#wiki_table tbody').children(item.toString().replace(/,/g, '')).show(300);
			} else {
				$('#wiki_table_select tbody').children().hide(400);
				var val = $('#wiki_table_select tbody').children().filter(function() {
					var data = $(this).data('param1').split(',');
					var j = 0;
					for(var i = 0; i < data.length; i++){
						if(item.indexOf(data[i]) < 0)
							continue;
						else
							j++;
					}
					if(j == item.length)
						return $(this);
				});
				val.show(300);
			}
			//$('#wiki_table tbody').children().not(item.toString().replace(/,/g, '')).hide(1000);
		} else {
			$('#wiki_table tbody').children().show(300);
		}
	});

 

2-将如下代码添加到您的WIKI的mediawiki:common.css里

/*条件筛选页面*/
.select-grid {
	width: 100%;
    padding: 10px 0 35px 0;
    display: table;
    margin: 0 0 40px 0;
    border-bottom: 1px solid #a2a9b1;
}

.select-grid table td {
    padding: 5px 10px 0 0;
}

.filter {
    display: block;
    clear: both;
}

span.select-wrap, span.imgselect-wrap {
	margin:0 15px 5px 0;
	padding: 8px 0;
	font-family: SourceHanSansCN-Regular;
    font-size: 14px;
    display: inline-block;
    color: rgba(0,0,0,.85);
    text-align: center;
    line-height: 14px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.1);
}

span.select-wrap {
	width:80px;
	height:30px;
}
span.imgselect-wrap {
	padding:8px 10px;
}

span.imgselect-wrap p {
	display: block;
	margin-top:10px;
}

/*手机端hover伪类显示异常，magic，只能靠js了*/
span.select-wrap.hover, span.imgselect-wrap.hover {
	color: #000;
    border: 1px solid rgb(133, 146, 239);
    cursor: pointer;
    background:#FFF;
}

span.select-wrap.active, span.imgselect-wrap.active {
	border: 1px solid rgba(119,132,222);
    color:rgba(119,132,222);
}

.filter li {
    list-style:none;
    float:left;
}

/*按钮样式修正*/
.section-wrap:hover{
	background-color:#8282b4 ;
}

span.select-wrap {
	font-family: SourceHanSansCN-Regular;
    font-size: 14px;
    display: inline-block;
    color: rgba(0,0,0,.85);
    text-align: center;
    line-height: 14px;
    border: 1px solid rgba(0,0,0,.1);
    border-radius:2px
}

 

注意复制用到的模板：模板:筛选项

丨应用示意

{|class="wikitable" style="width:100%"
|-
!width="80px"|查看全部
|
{{筛选项|0|0|查看全部}}
|-
!筛选参数1
|
{{筛选项|1|单手剑|}}
{{筛选项|1|双手剑|}}
{{筛选项|1|突击步枪|}}
{{筛选项|1|弓|}}
{{筛选项|1|篮子|}}
{{筛选项|1|魔法杖|}}
{{筛选项|1|手套|}}
{{筛选项|1|爪|}}
|-
!筛选参数2
|
{{筛选项|2|战士|}}
{{筛选项|2|射手|}}
{{筛选项|2|辅助|}}
{{筛选项|2|坦克|}}
|}
<div style="overflow-x:scroll;">
{|id="CardSelectTr" class="CardSelect wikitable sortable"  style="width:100%;text-align:center"
|-id="CardSelectTabHeader"
!表头1
!表头2
!表头3
!表头4
|-class="divsort" data-param1="这里改成改行筛选参数1的值" data-param2="这里改成改行筛选参数2的值"
|行1
|
|
|
|-class="divsort" data-param1="这里改成改行筛选参数1的值" data-param2="这里改成改行筛选参数2的值"
|行2
|
|
|
|}
</div>

查看全部	查看全部
筛选参数1	单手剑 双手剑 突击步枪 弓 篮子 魔法杖 手套 爪
筛选参数2	战士 射手 辅助 坦克

职业	武器	表头3	表头4
战士	单手剑	内容	内容
坦克	双手剑	内容	内容