微信答题小程序_JS完成商品筛选功用

摘要: JS完成产品挑选作用 本文关键为大伙儿详尽详细介绍了JS完成产品挑选作用,原文中实例编码详细介绍的十分详尽,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照一下...

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

效果图:

代码:

 !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 
 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 
 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 
 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++){
建一个数组
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 

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




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 400-000-8888

技术支持:公众号小程序