последовательно отображая только один div за один раз при нажатии

Question

Я изучал StackOverflow для ответов на эту проблему. Есть ответы, которые относятся к этому, но я не нашел ответов на этот конкретный случай. У меня есть серия div. Я хочу показать первый, когда страница сначала загружается, а затем перемещается на 2-й, 3-й и т. Д. Или в обратном порядке на 2-й, 1-й ... путем нажатия соответствующих кнопок «prev» и «next». Только один div виден в любой момент времени. Сейчас я работаю в прямом направлении. Я думал, что использование цикла, нацеленного на изменение идентификаторов div, которые срабатывают при нажатии, будет работать. Я был неправ.

Это HTML

<div class="container"> 
     <div id="section1" class="first"> 
         something in section 1 
     </div> 
     <div id="section2" class="ad"> 
      <p>doing tricks with section 2</p> 
     </div> 
     <div id="section3" class="ad"> 
     <p>and now is time for section 3</p> 
     </div> 

     <button id="hide">Hide</button> 


     </div> 
     <button id="show">Show</button> 

и это JS

 $(document).ready(function() { 
      var count = $("div.container div").length; 
      //alert(count); 
      $('#hide').on('click', function() { 
      $('div.ad').hide(); // hide all divs but the first 
      }); 


      for (var i=0; i< count; i++) { 
      $('#show').on('click', function() { 
      var j = i+1; 
      $('#section'+j).next().show(); 
      $('#section'+(j+1)).prev().hide(); 
      }); 
      }; 
     }); 

Answer 1

http://jsfiddle.net/mwq1pkow/

CSS:

.hidden { 
    display:none 
} 
.shown { 
    display:block 
} 

HTML:

<div class="container"> 
    <div id="section1" class="cont_div shown">something in section 1</div> 
    <div id="section2" class="cont_div hidden"> 
     <p>doing tricks with section 2</p> 
    </div> 
    <div id="section3" class="cont_div hidden"> 
     <p>and now is time for section 3</p> 
    </div> 
</div> 
<button id="prev">Prev</button> 
<button id="next">Next</button> 

JQ:

$('#next').click(function() { 
    var $next = $('.shown').next(); 

    $('.shown').removeClass('shown').addClass('hidden'); 

    if ($next.size() == 0) $next = $('.cont_div').first(); 

    $next.addClass('shown'); 

}) 

$('#prev').click(function() { 
    var $prev = $('.shown').prev(); 

    $('.shown').removeClass('shown').addClass('hidden'); 

    if ($prev.size() == 0) $prev = $('.cont_div').last(); 

    $prev.addClass('shown'); 

}) 

Answer 2

В вашем вопросе, count всегда 3, и это начало ваших проблем. Всегда есть три элемента: div; проблема в том, что некоторые из них скрыты. Они исчезают из поля зрения, но не из документа.

$(function() { 
 
    $('#hide').click(function() { 
 
    $('.container > div:visible:last').hide(); 
 
    }); 
 
    $('#show').click(function() { 
 
    $('.container > div:not(:visible):first').show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div id="section1" class="first"> 
 
    something in section 1 
 
    </div> 
 
    <div id="section2" class="ad"> 
 
    <p>doing tricks with section 2</p> 
 
    </div> 
 
    <div id="section3" class="ad"> 
 
    <p>and now is time for section 3</p> 
 
    </div> 
 
</div> 
 
<button id="hide">Hide</button> 
 
<button id="show">Show</button>

EDIT: Видимо, я неправильно понял вопрос. (?!? Почему ваши кнопки называются "скрыть" и "шоу" вместо "пред" и "следующий") То, что вы хотите, кажется, это:

$(function() { 
 
    $('.ad').hide(); 
 
    $('#prev').click(function() { 
 
    var $prev, $current = $('.container > div:visible:first'); 
 
    if ($prev = $current.prev()) { 
 
     $prev.show(); 
 
     $current.hide(); 
 
    } 
 
    }); 
 
    $('#next').click(function() { 
 
    var $next, $current = $('.container > div:visible:first'); 
 
    if ($next = $current.next()) { 
 
     $next.show(); 
 
     $current.hide(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div id="section1" class="first"> 
 
    something in section 1 
 
    </div> 
 
    <div id="section2" class="ad"> 
 
    <p>doing tricks with section 2</p> 
 
    </div> 
 
    <div id="section3" class="ad"> 
 
    <p>and now is time for section 3</p> 
 
    </div> 
 
</div> 
 
<button id="prev">Prev</button> 
 
<button id="next">Next</button>