wordpress分类页实现多重筛选——js

上一篇讲了我通过插件来实现分类页的多重筛选,效果并不是很满意,接下来说说我是如何通过js来实现的。

js

之所以用js,灵感来源于wordpress网站页面的后缀。wordpress可以通过给后缀添加参数,来实现不同分类列表的展现,以及多种分类条件的组合。那么只需要去淘宝,把他的筛选给扒下来,自己写js就行了,最后通过给url追加参数,即可实现筛选功能。

比如:

可以看到,这样的筛选有点击跳转、追加条件、删除条件这3个功能。因为追加参数只能是在动态也上实现,如果有需要的话,可能还要重写url实现伪静态效果。

用法

首先就去找一个你认为比较满意的网站的筛选,然后把它仿下来放到自己网站上先看看效果。

html

<div class="div-dip" id="box">
<dl>
<dt>品牌:</dt>
<dd>惠普</dd>
<dd>联想</dd>
</dl>
<dl>
<dt>价格:</dt>
<dd>3000-3999</dd>
<dd>4000-4999</dd>
<dd>5000-5999</dd>
</dl>
<dl>
<dt>尺寸:</dt>
<dd>8.9英寸以及以下</dd>
<dd>11英寸</dd>
<dd>12英寸</dd>
</dl>
<dl style="border: none">
<dt>显卡:</dt>
<dd>独立显卡</dd>
<dd>集成显卡</dd>
<dd>核芯显卡</dd>
</dl>
<dl class="select" style="border-bottom-width: 0px;">
<dt>已选条件:</dt>
</dl>
</div>

css

#box {width:98%;background: rgba(255, 255, 255, 0.8);box-shadow: 0 0 10px rgba(73,66,66,.1);border: 1px solid #E5E5E5;}
#box dl {height: 50px;line-height: 50px;border-bottom: 1px dashed #dadada;margin: 0 20px;}
#box dt {float: left;color: #8a8a8a;}
#box dd {float: left;color: #252525;margin: 0 10px;font-size: 14px;cursor: pointer;}
#box dd.active {color: #c4284d;font-weight: bold;}
#box dl.select {background: #efefef;margin: 0;padding: 0 20px;}
#box dl.select dd{border: 1px solid #c4284d;height: 25px;line-height: 25px;margin-top: 13px;padding: 0 2px 0 10px;border-radius: 3px;background-color: #fff;}
#box dl.select dd span{width: 20px;height: 20px;display: inline-block;text-align: center;line-height: 20px;background: #c4284d;color: #fff;margin-left: 10px;cursor: pointer;border-radius: 5px;}

js

var dls = document.querySelectorAll('dl:not(.select)');
var selected=document.querySelector('.select');
for (var i = 0; i < dls.length; i++) {
	dls[i].mark=false;	//给每一行的dl标签添加一条属性,用于对应下面的dd标签。我们约定如果这个属性的值为true表示对应的标签没有创建。如果值为false表示对应的标签已经创建了
	select(i);
}
function select(n) {
	var dds = dls[n].querySelectorAll('dd');
	var prev=null;//高亮状态
	var dd=null;	//每一行都需要创建一个dd标签,放到这里是为了如果标签已经被创建了,通过这个变量能够找到这个标签
	for (var i = 0; i < dds.length; i++) {
		dds[i].onclick = function () {
			if(prev){prev.className = '';}//清除高亮
			this.className = 'active';////给当前点击添加一个高亮
			prev = this;//赋予高亮状态
			//创建dd标签
			var parent=this.parentNode;
			if(!parent.mark){	//这个条件满足说明对应的dd标签还没有创建
				dd=document.createElement('dd');
				dd.innerHTML=this.innerHTML;
				selected.appendChild(dd);
				parent.mark=true;				
			}else{
				//走这里的时候说明对应的标签已经创建了,只需要把内容修改了就可以了
				dd.innerHTML=this.innerHTML;
			}			
			var span=document.createElement('span');
			var This=this;
			span.innerHTML='X';
			span.onclick=function(){
				//alert(1);
				/*
				点击关闭后要做的事情
				1、移除掉dd
				2、把上面点击的那个class去掉
				3、父级身上的mark属性要更新
				 */
				selected.removeChild(dd);
				This.className='';
				parent.mark=false;
			};
			dd.appendChild(span);
		};
	}
}
/*
第一次点击:点击筛选任一选项后,立马跳转,跳转后增加筛选条件
第二次点击:点击筛选后,立马跳转,跳转后更改筛选条件
删除筛选条件后,立马跳转,跳转后更改筛选条件
*/

js还没有写完,跳转还没有实现

[声明]本站内容除特别声明外,均属原创内容。
1、本站所有原创文章、图片等资料,如需转载使用,必须附上来源出处及链接方式;
2、若本站侵犯到您的权益或任何版权问题,请立即告知本站,我们将及时删除并致以最深的歉意!
3、本站转载文章版权归原作者所有,内容为作者个人观点,本站只提供参考并不构成任何投资及应用建议。任何本站转载文章链接及得到的资讯、产品、服务,本站概不负责,亦不负任何法律责任。
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇