jQuery教程$()实现数组元素分页效果的换行功能
最近一周在中文站搜索礼品小工具的需求,这个需求里面有一个分页功能。具体演示见下图:。
相应的js应用程序文件是相同的,页面后面的offer数据已经被隐藏,但是css display:none样式被启用来隐藏后面的offer元素。现在需要实现现有页面元素的分页效果,即页面元素的总集可以通过$(。类),然后就可以实现分页功能。按照传统的通用惯例,jQuery可以写成如下形式:拷贝代码:var total=$(。类)。长度;//获取要分页的元素总数var radio=3;//根据宽窄屏得到每页显示的报价数:var page size=par sent(total/radio);//获取总页数;if(总计% radio!=0){ PageSize=1;} var CurrentPage=1;//当前页面为第一页。//向前翻页的代码:$(。leftarrow,parentelem)。bind ('click ',函数(e){ var index=current page-1;if(CurrentPage==1){ return;}else{ $(。类)。css('display ',' none ');var elemIndex=index * radio//指针$(。类)。eq (elemindex)。要在数组中显示的元素的CSS(“”、“”);$(.类)。eq(elemIndex 1)。css('display ',' ');$(.类)。eq(elemIndex 2)。css('display ',' ');//以上三句可以改写为//$(。类)。eq (elemindex)。CSS ('display ',' ')//。下一个()。CSS ('display ',' ')//。下一个().CSS ('display ',' ')。currentPage=index} })//向后翻页的代码:$(。右箭头,parentelem)。bind ('click ',函数(e){ var index=current page 1;if(CurrentPage==PageSize){ return;}else{ $(。类)。css('display ',' none ');var elemIndex=index * radio//指针$(。类)。eq (elemindex)。要在数组中显示的元素的CSS(“”、“”);$(.类)。eq(elemIndex 1)。css('display ',' ');$(.类)。eq(elemIndex 2)。css('display ',' ');//以上三句可以改写为//$(。类)。eq (elemindex)。CSS ('display ',' ')//。下一个()。CSS ('display ',' ')//。下一个().CSS ('display ',' ')。currentPage=index}})你发现在翻页的代码中,不管最后一页只有一个报价、两个报价还是全部三个报价,我都是用同一个代码,没有任何判断的复制代码。代码如下: $(。类)。eq (elemin指数)。CSS ('display ',');$(.类)。eq(elemIndex 1)。css('display ',');$(.类)。eq(elemIndex 2)。css('display ',');这三个语句被连续调用。也就是说elemIndex可能出界了,也就是elemIndex$(。即使在这种情况下,$(。类)。eq (eleminindex1)。CSS ('display ',')还是可以的,浏览器不会报错,js照常执行,最终结果还是会完美显示。多亏了jQuery的包装函数生成的juery对象,如果elemindex=$(。类)。长度,$(。类)。eq (eleminindex1)返回一个空的jquery元素对象,即使它不对应于DOM中的元素,它仍然是一个jQuery对象,因此调用。css()方法不会出错,虽然页面没有变化效果;通过这个例子,我们可以理解为什么对于不匹配的元素,jQuey仍然返回jQuery Object而不是null。这种思想为数组分页操作提供了极大的便利,因为它避免了数组索引越界导致的程序错误,从而导致js执行中断,简化了大量数组索引越界的判断。
版权声明:jQuery教程$()实现数组元素分页效果的换行功能是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。