javascript - jQuery 来回隐藏

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 的 div 1到5？当您点击 sub-down div 你可以看到带有 data-count 的 div 2到6，依次点击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 .

解决方案(感谢 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);
    });
});