javascript - 单击同一按钮后一次显示下一个图像 div 并在 javascript html 中隐藏当前图像 div

Question

我正在使用 Javascript、Html5、Jquery 和 Css。现在我有三个图像 div，我想在单击按钮后显示一个图像 div，我想在单击同一按钮后显示下一个 div 并隐藏当前 div。

现在我正在使用这段代码:
CSS 代码:

#Div2 {
    display: none;
}
#Div3 {
    display: none;
}

HTML代码:

<div class="container">
    <div class="row">    
        <input id="Button1" type="button" value="Click" onclick="switchVisible();"/>
        <div class="col-sm-4">
            <div id="Div1">
                <canvas id="canvas1" class="img-responsive center-block" style="float:left"></canvas>  
            </div>
            <div id="Div2">
                <canvas id="canvas2" class="img-responsive center-block" style="float:left"></canvas>   
            </div>
            <div id="Div3">
                <canvas id="canvas3" class="img-responsive center-block" style="float:left"></canvas>    
            </div>
        </div> 
    </div>
</div>

Java 脚本代码:

 function switchVisible() {
            if (document.getElementById('Div1')) {
                if (document.getElementById('Div1').style.display === 'none') {
                    document.getElementById('Div1').style.display = 'block';
                    document.getElementById('Div2').style.display = 'none';
                    document.getElementById('Div3').style.display = 'none';
                }
                else if (document.getElementById('Div2').style.display === 'none') {
                    document.getElementById('Div1').style.display = 'none';
                    document.getElementById('Div2').style.display = 'block';
                    document.getElementById('Div3').style.display = 'none';

                }
                else
                {
                    document.getElementById('Div1').style.display = 'none';
                    document.getElementById('Div2').style.display = 'none';
                    document.getElementById('Div3').style.display = 'block';
                }
            }
        }

此代码适用于两个图像 div，但不适用于第三个图像。我已从以下链接获得帮助:https://stackoverflow.com/questions/

现在我有三个图像 div，但现在我在点击按钮后一次显示一个图像 div。

我想在单击按钮后显示下一个图像 div 并隐藏当前图像 div。我之前告诉过我正在使用三个图像 div。我展示图像的动机是旋转的。
请给我一些想法。

Answer 1

如果您使用的是 jQuery，您可以这样做:

function switchVisible() {
    $(".img-responsive").parent().each(function(){
        if($(this).is(":visible")) {
            $(".img-responsive").parent().hide();
            if ($(this).next().length) {
                $(this).next().show();
            } else {
                $($(".img-responsive")[0]).parent().show();
            }

            return false;
        }
    })
}

您可以使用 prev() 而不是 next() 返回。

 function switchVisibleRevert() {
    $(".img-responsive").parent().each(function(index){
        if($(this).is(":visible")) {
            $(".img-responsive").parent().hide();
            if ($(this).prev().length) {
                $(this).prev().show();
            } else {
                $($(".img-responsive")[$(".img-responsive").length-1]).parent().show();//show last element
            }

            return false;
        }
    })
}