Question

HTML代码

<div id="sub-up"></div>

<div id="subnavigation">
    <div class="sub-item" data-count="1">
        <a href="#">bla</a>
    </div>                  
    <div class="sub-item" data-count="2">
        <a href="#">bla</a>
    </div>
    <div class="sub-item" data-count="3">
        <a href="#">bla</a>
    </div>
    <div class="sub-item" data-count="4">
        <a href="#">bla</a>
    </div>
    <div class="sub-item" data-count="5">
        <a href="#">bla</a>
    </div>
    <div class="sub-item" data-count="6">
        <a href="#">bla</a>
    </div>
    <div class="sub-item" data-count="7">
        <a href="#">bla</a>
    </div>
    <div class="sub-item" data-count="8">
        <a href="#">bla</a>
    </div>
    <div class="sub-item" data-count="9">
        <a href="#">bla</a>
    </div>
    <div class="sub-item" data-count="10">
        <a href="#">bla</a>
    </div>
</div>

<div id="sub-down"></div>

如何管理它，如果你加载页面，你可以看到data-count 1到5的div？当您点击sub-down div时，您可以看到带有data-count 2到6的div，再点击sub-down后，您可以看到3到7？

当您点击sub-up div时，您可以看到data-count 2到6，依此类推......

我不知道如何记住所显示的5个div的位置以及如何告诉jQuery它必须切换到最高数字，如果你想点击低于data-count 1.就像卡鲁塞尔一样效果。

所以我尝试完成的就像是一个带有5个div标签的转盘，它在sub-down和sub-up上每次点击都会移动。

如果你想阅读我目前编写的jQuery代码，请告诉我。哦，另一件事，div list is dynamic。

解决方案（thx to sdespont）

var page = 0;
var pageMax = $('.sub-item').length - 5;

$('#subnavigation div.sub-item').hide().slice(page, page + 5).fadeIn(10);

$('#sub-down').click(function () {
    page = (page < pageMax) ? page+1 : pageMax;
    var tmp = page * 1;
    $('#subnavigation div.sub-item').fadeOut(10).promise().done(function () {
        $('#subnavigation div.sub-item').slice(tmp, tmp + 5).fadeIn(10)
    });
});

$('#sub-up').click(function () {
    page = (page > 0) ? page-1 : 0;
    var tmp = page * 1;
    $('#subnavigation div.sub-item').fadeOut(10).promise().done(function () {
        $('#subnavigation div.sub-item').slice(tmp, tmp + 5).fadeIn(10);
    });
});

修改

另一种解决方案可以在他/她更新的答案中找到。非常感谢你！

Answer 1

您可以执行以下操作：http://jsfiddle.net/UQTY2/258/

使用nbElem进行游戏，以选择要显示的元素数量

var $elem = $('#subnavigation div.sub-item');

var page = 0;
var nbElem = 1;
var pageMax = $elem.length / nbElem;
var fadeSpeed = 100;

//Display the first batch of elements
$('#subnavigation div.sub-item').hide().slice(page, page + nbElem).fadeIn(fadeSpeed);

//Next batch of elements
$('#sub-down').click(function () {
    page = (page < pageMax) ? page + 1 : pageMax;
    var tmp = page * nbElem;
    $elem.fadeOut(fadeSpeed).promise().done(function () {
        $elem.slice(tmp, tmp + nbElem).fadeIn(fadeSpeed);
    });
});

//Previous batch of elements
$('#sub-up').click(function () {
    page = (page > 0) ? page - 1 : 0;
    var tmp = page * nbElem;
    $elem.fadeOut(fadeSpeed).promise().done(function () {
        $elem.slice(tmp, tmp + nbElem).fadeIn(fadeSpeed);
    });
});

Answer 2

sdespont的建议应该有效，但您是否考虑使用CSS来显示/隐藏而不是添加和删除DOM元素？

你可以用css和nth-child做到这一点。

div.sub-item:nth-child(n+5){
    display: none;
}

结果是javascript更少，整体代码更简单。这是一个jsfiddle的例子。

http://jsfiddle.net/RC4mt/2/

jQuery来回隐藏

2 个答案: