我有一个列表元素,包含20-30个事件之间的数量.我只想展示其中的5个,并有一个«更多»链接我可以点击观看接下来的五个.如果附加五个下一个事件并不重要.
找不到实际执行此操作的jQuery脚本,或者我只是盲目?我不想使用旋转木马插件或类似的东西.
解决方法
好吧,幸运的是,对于我们编写食物和名望代码的程序员来说,并非所有可以想象的功能都已编写为插件:)
但这很容易:
- var from = 0,step = 5;
- function showNext(list) {
- list
- .find('li').hide().end()
- .find('li:lt(' + (from + step) + '):not(li:lt(' + from + '))')
- .show();
- from += step;
- }
- function showPrevIoUs(list) {
- from -= step;
- list
- .find('li').hide().end()
- .find('li:lt(' + from + '):not(li:lt(' + (from - step) + '))')
- .show();
- }
- // show initial set
- showNext($('ul'));
- // clicking on the 'more' link:
- $('#more').click(function(e) {
- e.preventDefault();
- showNext($('ul'));
- });