После того, как вы нажмете на ту же кнопку, покажите следующее изображение div за раз и скройте текущее изображение div в javascript html

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 Script код:

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, но он не работает для третьего изображения. Я принял помощь fr om this link: https://stackoverflow.com/questions/

Теперь у меня есть три изображения div, но прямо сейчас я показываю один образ div за один раз после нажатия кнопки.

Я хочу показать следующий DIV изображений после щелчка на кнопке и скрыть текущее изображение div.I сказал ранее, я использую три 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. При следующем вызове второе условие устанавливает Div2 для блокировки, а Div1 - none none ... поэтому следующее условие 1 следующего вызова снова оценивается как истинное, так как Div1 во втором условии было установлено «none».

Возможно, вы попытаетесь удалить «else» и добавить другое, если условие, которое проверяет, содержит ли Div2 == 'block', вы знаете, что если 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'; 
      } 
     } 

Это может быть проще, чтобы инициализировать счетчик, чтобы отслеживать, какие изображения показываются, так как каждый Див имеет уникальный идентификатор и последовательное значение.