工作_杂项(JS)

Posted 2020-11-03 七分sunshine!

假设有一个场景;

有一个ui>li结构:

<ul id=uls>
    <li><input type="checkbox" >内容0000000</li>
    <li><input type="checkbox" >内容1111111</li>
    <li><input type="checkbox" >内容2222222</li>
    <li><input type="checkbox" >内容3333333</li>
</ul>

//下面是翻页;  ul中的内容是每次通过翻页会刷新的;
<div> 
<span>1</span> 
<span>2</span> 
<span>3</span> 
</div>

 

现在的要求是:

当用户在第一页选择了某个元素;然后又要跑到第二页去选择某个元素;用户有时候会返回第一页去确定一下第一页有没有选好(确实我作为用户也会有这种小纠结);

 

解决方法我目前想到两种:

1.需要后台配合,其实是需要增加一个 属性来保存 是否被选中;下次翻页回来的时候,有这个属性那么就写个方法过滤一下,让它被选中;

-------------------------------

2.后台一般并没有这样,每次选择都要发一个请求,其实不利于服务器端的性能优化;前端需要做的其实也很简单,在input被点击的时候给它一个自定义属性,

但是仅仅这样是并没有什么用,因为当你翻页之后生成的li,以及input全部是新的,就算有个100万,也被刷没了;于是观察到每一条商品列表都有一个唯一的标识,暂且叫做s_id(就认为是li的某个属性吧);

ajax翻页的时候是局部刷新,可以把选中的状态值暂时存放到数组中,但是这个状态值要跟那个唯一的s_id关联起来;所以以后 不管翻到哪一页,就去匹配这个id下有没有这个被选中的值;OK搞定;