点击同一个按钮后，一次显示下一个图像div，并在javascript html中隐藏当前图像div [英] After click on same button show next image div at a time and hide current image div in javascript html

问题描述

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

现在我使用这段代码：

Css代码：

 ＃Div2 {
显示：无; 
} 
＃Div3 {
 display：none; 
} 
  

HTML代码：

 < div class =container> 
< div class =row> 
< input id =Button1type =buttonvalue =Clickonclick =switchVisible（）;/> 
< div class =col-sm-4> 
< div id =Div1> 
< canvas id =canvas1class =img-responsive center-blockstyle =float：left>< / canvas> 
< / div> 
< div id =Div2> 
< canvas id =canvas2class =img-responsive center-blockstyle =float：left>< / canvas> 
< / div> 
< div id =Div3> 
< canvas id =canvas3class =img-responsive center-blockstyle =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 ='没有'; 
 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，但它不适用于第三个图像。我从这个链接获得了帮助：

我想在点击按钮后显示下一个图像div并隐藏当前图像div。我之前告诉我使用三个图像div。我的动机显示图像是旋转。

请给我一些关于这个想法。

你使用jQuery你可以这样做：

  function switchVisible（）{
 $（。img- 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; 
} $ b $你可以使用 prev（） 
 
 
 
 
 
 
 / code>代替 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最后一个元素
} 
 
返回false; 
} 
}）
} 
  
 
I am using Javascript, Html5, Jquery and Css. Right now I have three image div and I want to show one image div after click on button and I want to show next div after click on same button and hide current div.


right now i am using this code:

Css Code:
#Div2 {
    display: none;
}
#Div3 {
    display: none;
}
Html Code:
<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 Script Code:
 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';
                }
            }
        }
This code is working fine for two image div but it is not working for the third image.I've taken help from this link:https://stackoverflow.com/questions/

Now I have three image div but right now I am showing one image div at a time after click on button.



I want to show next image div after click on button and hide current image div.I told earlier I am using three image div. my motive to show image is as rotating.

Please give me some idea about this.
解决方案
If you are using jQuery you could do this like this:
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;
        }
    })
}
You can use prev() instead of next() for going back.
 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;
        }
    })
}


                        
这篇关于点击同一个按钮后，一次显示下一个图像div，并在javascript html中隐藏当前图像div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！