Question

我想创建类似于幻灯片放映的东西，只要点击按钮#more-projects，就会显示4个div，当再次点击这些div时，这些div会隐藏，接下来的4个div显示，这需要无限循环并适用于任意数量的div。

在这种情况下，我在div'#container'中有6个div与类.thumbnail-cnt，当我点击#more-projects时，我想要显示这些div的前4个，div 1,2 ，3,4。再次单击#more-projects时，循环中的下4个div将显示为5,6,1,2。再次单击，显示div 1,2,3,4。如何选择下一个索引并使函数无限地迭代元素？

<div id="container">
    <div class="thumbnail-cnt" data-num="1">1
    </div>
    <div class="thumbnail-cnt" data-num="2">2
    </div>
    <div class="thumbnail-cnt" data-num="3">3
    </div>
    <div class="thumbnail-cnt" data-num="4">4
    </div>
    <div class="thumbnail-cnt" data-num="5">5
    </div>
    <div class="thumbnail-cnt" data-num="6">6
    </div>
</div>

<button id="more-projects" > Next
</button>

我的JS到目前为止

var startIndex = 0;

$('#more-projects').on("click", function() {
    var endIndex = startIndex + 4;
    var nextIndex = endIndex +1;
    $('#container .thumbnail-cnt').slice(startIndex, endIndex).addClass('visible');
    var startIndex = nextIndex;
}

CSS

.thumbnail-cnt {
    display: none;
}
.visible {
    display: block;
}

Answer 1

解决方案可以基于：

将最大可见项目的初始值保存为div的数据值
将起始索引另存为另一个数据值

因此，初始值为：

$data = !empty($_COOKIE['data']) ? unserialize($_COOKIE['data']) : null;

在点击处理程序中计算结束索引位置。如果超过最大值，则需要从头开始。将此新值保存为新的起始索引。

<div id="container" data-start-index="0" data-max-visible-length="4">

$('#more-projects').on("click", function() {
    var startIndex = $('#container').data('startIndex');
    var maxVisibleLength = $('#container').data('maxVisibleLength');
    var endIndex = startIndex + maxVisibleLength;
    var itemCounts = $('#container .thumbnail-cnt').length;
    $('#container .thumbnail-cnt.visible').removeClass('visible');
    if (endIndex > itemCounts) {
        endIndex = endIndex - itemCounts;
        $('#container .thumbnail-cnt').slice(startIndex).addClass('visible');
        $('#container .thumbnail-cnt').slice(0, endIndex).addClass('visible');
    } else {
        $('#container .thumbnail-cnt').slice(startIndex, endIndex).addClass('visible');
    }
    $('#container').data('startIndex', endIndex);
});

.thumbnail-cnt {
    display: none;
}
.visible {
    display: block;
}

Answer 2

你可以为你的JS试试这个。这将确保无限循环 -

var startIndex = 0;
$('#more-projects').on("click", function() {

var count = 0;    
var divs = $('#container .thumbnail-cnt');
var len = divs.length
var index;
while( count < 4 ){
    index = (startIndex+count) % len; 
    divs[index].addClass('visible');
    count++;
}
startIndex += count;

index++; //to ensure removal start from the next

while( count < len ){
    index = index % len;
    divs[index++].removeClass('visible');
    count++;
}

}

%确保边界和包裹。删除不需要显示的其他div的类visible。您当前的实现一定是失败的。

div上的无限循环，一次显示4个

2 个答案: