單擊同一按鈕后，一次顯示下一個圖像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;
        }
    })
}

Answer 2

看一下條件語句。

        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';
            }
        }

第一條條件語句是將Div1的顯示屬性設置為block。 在下一個調用中，第二個條件將Div2設置為block，將Div1再次設置為none ...所以在下一個調用條件1中，條件1再次評估為true，因為在第二個條件中Div1設置為“ none”。

如果檢查條件是否為Div2 =='block'的條件成立，您可能會嘗試刪除'else'並添加另一個，則您知道，如果Div2設置為.block'，則要顯示的下一個圖像是圖像3：

         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('Div1').style.display === 'block') {
                document.getElementById('Div1').style.display = 'none';
                document.getElementById('Div2').style.display = 'block';
                document.getElementById('Div3').style.display = 'none';

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

初始化計數器以跟蹤正在顯示的圖像可能更簡單，因為每個Div都有唯一的ID和順序值。