javascript - 一个页面有四个图片，翻页的时候想固定住某个图片然后翻页，如何实现呢?

问题描述

页面是这样：一页上显示四张图片，每次翻页的时候四张一起更换，现在想在每个图片的左上角添加一个勾选框，当图片对应的勾选框被选中时，点击下一页或者上一页，这张图片不会更换，而未勾选的图片会更换。我现在能想到的就是记录一下被选中时图片在数据库中的rownum，然后根据这rownum以及当前是否有固定住的图片来设置pageSize例如：左上角图片被勾选的时候，pageSize=3；没有勾选的时候pageSize = 4

现在的问题是，前台怎么处理呢？我用asp.net开发的程序，前台展示用的asp.net的控件自动迭代出来的结果，怎么控制呢？

<asp:DataList runat='server' RepeatColumns='2'><ItemTemplate> <p class='col-lg-12'><p style='margin-top: 5px'>科目代码:</p><p style='margin-top:5px;margin-left:-10px'><%#Eval('TJ_KM_DM')%></p><p style='margin-top: 5px; text-align:right'>考试时间:</p><p style='margin-top: 5px;'><%#Eval('KSSJ') %></p><input type='hidden' value='<%#Eval('KS_ZKZ')%>' /><input type='hidden' value='<%#Eval('BJSH_JG_QX')%>'/> <input type='hidden' value='img/<%#Eval('KSSJ').ToString()+'/'+Eval('TJ_KM_DM').ToString().Trim()+'/'+Eval('KS_ZKZ')+'.jpg'%>' /><p style='margin-left:50px'> <input value='未标记' type='button' onclick='signCard(this)' /></p><img src='https://www.haobala.com/img/<%#Eval('KSSJ').ToString()+'/'+Eval('TJ_KM_DM').ToString().Trim()+'/'+Eval('KS_ZKZ')+'.jpg'%>' alt='Responsive image' /> </p></ItemTemplate> </asp:DataList>

上面的代码，直接可以迭代出上图的效果，如果按照上面说的内容，我感觉需要操作每个img没什么好的办法，求大神指导。

问题解答

我提供我个人的想法：你需要一个数据栈来保存相关的信息，标记一个保存一个，然后再每次翻页的时候都进行一次数据读取，如果能读到数据，则返回数据并进行相关操作，然后继续读取，直到读完再使用新的数据。