first commit

历届学生/逯帅帅/项目开发/上课项目/屁桃儿/js/page/classification.js

@@ -0,0 +1,88 @@
+class Cation {
+    constructor() {
+        this.getCation();
+        // 这里的俩个数组不能直接为空数组，不然刷新之后就会被立即置空，应该是从本地里面动态的读出来的
+        this.topList = localStorage.getItem('type')==null?[]:JSON.parse(localStorage.getItem('type'));
+        this.bottomList = localStorage.getItem('bottom_type')==null?[]:JSON.parse(localStorage.getItem('bottom_type'));
+    }
+
+    getCation() {
+        //吧type里面的值赋值给空数组topList
+        this.topList = JSON.parse(localStorage.getItem('type'));
+        console.log(this.topList);
+
+        // 遍历，渲染进上面的页面
+        $('.top_li').html('');
+        $(this.topList).each((index,item) => {
+            $('.top_li').append(`<li>${item.title}</li>`);
+        })
+        //调用onclick函数
+        this.onclick();
+
+
+        //jq情况网页元素使用html
+        $('.bottom_li').html('');
+        //从localStorage取出来赋值
+        this.bottomList=JSON.parse(localStorage.getItem('bottom_type'));
+        //遍历渲染
+        $(this.bottomList).each((index,item)=>{
+            $('.bottom_li').append(`<li>${item.title}</li>`)
+        })
+        console.log(this.bottomList);
+        this.bottomLick();
+
+    }
+
+    // 点击事件函数
+    onclick() {
+        //拿到上面页面的li
+        $('.top_li li').each((index,item) => {
+            // 注册点击事件
+            $(item).click(()=>{
+
+                //点谁就把谁追加近bottomList
+                this.bottomList.push(JSON.parse(localStorage.getItem('type'))[index]);
+                //存入localStorage
+                localStorage.setItem('bottom_type',JSON.stringify(this.bottomList))
+               
+               
+                //过滤好的值查询赋值给res
+                let res = JSON.parse(localStorage.getItem('type')).filter((i, j) => {
+                    //i。id就是所有的值，JSON.parse(localStorage.getItem('type'))[index].id)是我们点击时的当前值
+                    //这句话的意思就是点击谁就把其他返回出去，点击的过滤掉
+                    if (i.id != JSON.parse(localStorage.getItem('type'))[index].id) {
+                        return i;
+                    }
+                });
+                // 然后存入localStorage中，记得使用JSON.stringify()转换
+                localStorage.setItem('type',JSON.stringify(res));
+                // 在重新调用上面的方法，遍历渲染进页面，就完成了点谁去除谁的骚操作了
+                this.getCation();
+            })
+        })
+    }
+
+    bottomLick(){
+       $('.bottom_li li').each((j,i)=>{
+           $(i).click(()=>{
+
+            this.topList.push(JSON.parse(localStorage.getItem('bottom_type'))[j]);
+            localStorage.setItem('type',JSON.stringify(this.topList))
+           
+
+             let msg=  JSON.parse(localStorage.getItem('bottom_type')).filter((x,y)=>{
+                  if(x.id != JSON.parse(localStorage.getItem('bottom_type'))[j].id){
+                      return x;
+                  }
+              });
+              localStorage.setItem('bottom_type',JSON.stringify(msg));
+              this.getCation();
+           })
+       })
+    }
+
+
+
+}
+
+new Cation();