单击按钮加载/删除Div

Question

我在页面上有4个div，但我想隐藏所有的div，就像幻灯片一样，当我单击按钮时，它会加载下一张图片。 有没有办法用<div>做到这一点？ 默认情况下，使用按钮加载第一个按钮，该按钮允许加载下一个按钮并从页面中删除第一个按钮，并且最好循环浏览一次？

Answer 1

看看这个js。 我刚刚发现了这种特殊技术，但是如果不合适的话，还有其他方法。

$('#prev').click( function() {
    $('.num.ind').prev().addClass("ind");
        $(".num.ind").next().removeClass("ind");
});

$('#next').click( function() {
    $('.num.ind').next().addClass("ind");
         $(".num.ind").prev().removeClass("ind");
});

这是一个用文本而不是图像的小提琴，但是用图像替换将是微不足道的： http : //jsfiddle.net/7jsojqbq/1/

Answer 2

抓取图像DIV并遍历它们，以隐藏除第一个图像之外的所有图像。 然后获取按钮并将其附加到其click事件上，从而遍历DIV，以寻找未隐藏的DIV。 找到后，请做一些事情，首先将其隐藏，然后为下一个循环设置一个标志。 在设置了标志的下一个循环中，显示当前DIV，然后重置标志。

如果在循环运行后仍设置该标志，则意味着我们需要显示第一个图像DIV。

JSFiddle在这里。

var divs = document.getElementsByTagName('div');
Array.prototype.slice.call(divs).forEach(function(elem, idx) {
    if ( idx ) {
        elem.style.display = 'none'
    }
})

var button = document.getElementsByTagName('button')[0]
button.addEventListener('click', function() {
    var found = 0
    Array.prototype.slice.call(divs).forEach(function(elem) {
        if ( found ) {
            elem.style.display = 'block'
            found = 0
        }
        else if ( elem.style.display !== 'none' ) {
            elem.style.display = 'none'
            found = 1
        }
    })
    if ( found ) { divs[0].style.display = 'block' }
})

HTML示例：

<div><img src="..."/></div>
<div><img src="..."/></div>
<div><img src="..."/></div>
<div><img src="..."/></div>

<button>Next</button>

该脚本不在乎有多少个DIV。