88 lines
3.2 KiB
JavaScript
88 lines
3.2 KiB
JavaScript
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(); |