java 商品筛选视频教程_JS实现商品筛选功能

每天一个JS 小demo之商品筛选。主要知识点：DOM方法综合运用

效果图：

代码：

Document

nav {

height: 50px;

}

nav span {

margin: 0 5px;

}

.show {

color: red;

}

• 手机:

  锤子T1

  锤子T2

  坚果U1

  锤子M1

  坚果Pro

• 价格:

  3200

  2600

  899

  2799

  2299

• 屏幕:

  399

  600

  800

  1200

(function(){

var nav = document.querySelector('nav');

var li = document.querySelectorAll('li');

var ids = [];

for(var i = 0; i

setClick(li[i],i);

}

function setClick(parent,index){

var option = parent.getElementsByTagName("a");

for(var i = 0; i < option.length; i++){

/*

建一个数组

*/

option[i].onclick = function(){

for(var i = 0; i < option.length; i++){

option[i].className = "";

}

this.className = "show";

var span = ids[index];

if(ids[index]){

span.children[0].innerHTML = this.innerHTML;

return;

}

span = document.createElement("span");

var a = document.createElement("a");

var strong = document.createElement("strong");

a.innerHTML = "x";

a.href="javascript:;";

a.onclick = function(){

nav.removeChild(span);

ids[index]="";

/*

删除元素清空数组对象位

*/

for(var i = 0; i < option.length; i++){

option[i].className = "";

}

}

strong.innerHTML = this.innerHTML;

span.appendChild(strong);

span.appendChild(a);

ids[index] = span;

/*

元素生成之后，先存入数组的对应位

*/

/*

按照数组的顺序重新添加一遍元素

*/

for(var i = 0; i < ids.length; i++){

if(ids[i]){

nav.appendChild(ids[i]);

}

}

};

}

}

})();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。