JavaScript implementiert die Produktfilterfunktion-js-Tutorial-php.cn

JavaScript implementiert die Produktfilterfunktion

陈政宽～

Freigeben： 2017-06-28 11:54:40

Original

2762 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die JS-Produktfilterfunktion im Detail vorgestellt, die einen gewissen Referenzwert hat.

Eine kleine JS-Demo der Produktfilterung jeden Tag. Hauptwissenspunkte: Umfassende Verwendung von DOM-Methoden

Rendering:

Code:

<!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>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonJavaScript implementiert die Produktfilterfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!