快捷導(dǎo)航

JS實現(xiàn)商品篩選功能

更新時間：2020年08月19日 11:38:38 作者：catEatBird

這篇文章主要為大家詳細介紹了JS實現(xiàn)商品篩選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

每天一個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('nav');
var li = document.querySelectorAll('li');
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++){
/*
建一個數(shù)組
*/
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]="";
/*
刪除元素清空數(shù)組對象位
*/
for(var i = 0; i < option.length; i++){
option[i].className = "";
}
}
strong.innerHTML = this.innerHTML;
span.appendChild(strong);
span.appendChild(a);
ids[index] = span;
/*
元素生成之后，先存入數(shù)組的對應(yīng)位
*/

/*
按照數(shù)組的順序重新添加一遍元素
*/
for(var i = 0; i < ids.length; i++){
if(ids[i]){
nav.appendChild(ids[i]);
}
}
};
}
}
})(); 
</script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JS實現(xiàn)簡單的todoList(記事本)效果
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單的todoList（記事本）效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
js簡單遍歷獲取對象中的屬性值的方法示例
這篇文章主要介紹了js簡單遍歷獲取對象中的屬性值的方法,涉及javascript使用for循環(huán)遍歷json對象屬性值的簡單操作技巧,需要的朋友可以參考下
2019-06-06
javascript 文檔的編碼問題解決
在引用與本頁面編碼格式不一樣的js文檔時，如果被引用的js代碼有ASCII字符之外的字符，那么就會出現(xiàn)代碼錯誤。
2009-03-03
三分鐘帶你快速學(xué)會微信小程序的條件渲染
所謂的條件渲染就是判斷是否需要把代碼渲染到展示頁面上,下面這篇文章主要給大家介紹了關(guān)于微信小程序條件渲染的相關(guān)資料,文中通過實例代碼和圖文介紹的非常詳細,需要的朋友可以參考下
2022-08-08
JS+JSP checkBox 全選具體實現(xiàn)
本文為大家介紹下使用JS+JSP實現(xiàn)checkBox全選，下面有個不錯的示例，感興趣的朋友可以參考下
2014-01-01
IE與Firefox在JavaScript上的7個不同寫法小結(jié)
盡管那需要用長串的、沉悶的不同分支代碼來應(yīng)付不同瀏覽器的日子已經(jīng)過去，偶爾還是有必要做一些簡單的區(qū)分和目標檢測來確保某塊代碼能在用戶的機器上正常運行。
2009-09-09
微信小程序?qū)崿F(xiàn)卡片左右滑動效果的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)卡片左右滑動效果的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
iOS微信H5頁面橡皮回彈效果的踩坑記錄
移動端開發(fā)時,H5長頁面在iOS系統(tǒng)中滑動時,當頁面滑動到頂部或底部時,頁面還能夠上滑或下滑,手指離開屏幕后回彈,這就時橡皮筋效果,這篇文章主要給大家介紹了關(guān)于iOS微信H5頁面橡皮回彈效果的相關(guān)資料,需要的朋友可以參考下
2021-07-07
js 實現(xiàn)復(fù)選框只能選擇一項的示例代碼
下面小編就為大家分享一篇js 實現(xiàn)復(fù)選框只能選擇一項的示例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
JS解決?Array.fill()參數(shù)為對象指向同一個引用地址的問題
這篇文章主要介紹了JS解決?Array.fill()參數(shù)為對象指向同一個引用地址問題，解決方案使用map返回出不同的引用的地址，fill參數(shù)可隨意填寫（不為空），主要是map函數(shù)中返回的數(shù)據(jù),需要的朋友可以參考下
2023-02-02