Rumah > Artikel > hujung hadapan web > javascript实现商品筛选的功能

javascript实现商品筛选的功能

陈政宽～asal: 2017-06-28 11:54:402814semak imbas

这篇文章主要为大家详细介绍了JS实现商品筛选功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
nav {
height: 50px;
}
nav span {
margin: 0 5px;
}
.show {
color: red;
}
</style>
</head>
<body>
<nav></nav>
<ul>
<li>
<strong>手机:</strong>
<a href="javascript:;">锤子T1</a>
<a href="javascript:;">锤子T2</a>
<a href="javascript:;">坚果U1</a>
<a href="javascript:;">锤子M1</a>
<a href="javascript:;">坚果Pro</a>
</li>
<li>
<strong>价格:</strong>
<a href="javascript:;">3200</a>
<a href="javascript:;">2600</a>
<a href="javascript:;">899</a>
<a href="javascript:;">2799</a>
<a href="javascript:;">2299</a>
</li>
<li>
<strong>屏幕:</strong>
<a href="javascript:;">399</a>
<a href="javascript:;">600</a>
<a href="javascript:;">800</a>
<a href="javascript:;">1200</a>
</li>
</ul>
<script type="text/javascript">
(function(){
var nav = document.querySelector(&#39;nav&#39;);
var li = document.querySelectorAll(&#39;li&#39;);
var ids = [];
for(var i = 0; i <li.length; 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]);
}
}
};
}
}
})(); 
</script>
</body>
</html>

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

Atas ialah kandungan terperinci javascript实现商品筛选的功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：javascript实现新建文件夹的功能Artikel seterusnya：javascript利用正则表达式实现密码强弱判断实例

Artikel berkaitan

Lihat lagi