小編給大家分享一下JS如何實(shí)現(xiàn)商品篩選功能,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
成都創(chuàng)新互聯(lián)公司擁有一支富有激情的企業(yè)網(wǎng)站制作團(tuán)隊(duì),在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)深耕10余年,專業(yè)且經(jīng)驗(yàn)豐富。10余年網(wǎng)站優(yōu)化營(yíng)銷經(jīng)驗(yàn),我們已為1000+中小企業(yè)提供了網(wǎng)站制作、做網(wǎng)站解決方案,按需設(shè)計(jì)網(wǎng)站,設(shè)計(jì)滿意,售后服務(wù)無(wú)憂。所有客戶皆提供一年免費(fèi)網(wǎng)站維護(hù)!
1、能夠嵌入動(dòng)態(tài)文本于HTML頁(yè)面。2、對(duì)瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測(cè)訪客的瀏覽器信息。6、控制cookies,包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。
每天一個(gè)JS 小demo之商品篩選。主要知識(shí)點(diǎn):DOM方法綜合運(yùn)用
效果圖:
代碼:
<!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>手機(jī):</strong> <a href="javascript:;">錘子T1</a> <a href="javascript:;">錘子T2</a> <a href="javascript:;">堅(jiān)果U1</a> <a href="javascript:;">錘子M1</a> <a href="javascript:;">堅(jiān)果Pro</a> </li> <li> <strong>價(jià)格:</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++){ /* 建一個(gè)數(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ù)組對(duì)象位 */ 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ù)組的對(duì)應(yīng)位 */ /* 按照數(shù)組的順序重新添加一遍元素 */ for(var i = 0; i < ids.length; i++){ if(ids[i]){ nav.appendChild(ids[i]); } } }; } } })(); </script> </body> </html>
以上是“JS如何實(shí)現(xiàn)商品篩選功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
當(dāng)前標(biāo)題:JS如何實(shí)現(xiàn)商品篩選功能
URL網(wǎng)址:http://www.muchs.cn/article4/jsodoe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供自適應(yīng)網(wǎng)站、虛擬主機(jī)、電子商務(wù)、企業(yè)建站、網(wǎng)站制作、做網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)