Используя JQuery, как показать и скрыть событие onClick другого div

Question

Я хотел бы показать div на основе события Onclick ссылки.

Первый клик - Показать div1
Второй щелчок - скрыть оставшиеся div и показать div2
Третий щелчок - скрыть оставшиеся div и показать div3
Четвертый щелчок - скрыть оставшиеся элементы div и показать div1 => повторить цикл и продолжить ..

Код следует:

<div class="toggle_button">
      <a href="javascript:void(0);" id="toggle_value">Toggle</a>
</div>


<div id='div1' style="display:none;"> 
  <!-- content -->
</div>

<div id='div2' style="display:none;"> 
  <!-- content -->
</div>

<div id='div3' style="display:none;"> 
  <!-- content -->
</div>

Код запроса:

$(document).ready(function() {
        $("#toggle_value").click(function(){
           $("#div1").show("fast");
           $("#div2").show("fast");
           $("#div3").show("fast");
        });
});

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

Answer 1

Мое решение немного отличается - я бы сделал это в зависимости от состояния div в текущий момент (по клику). Смотрите ниже, что я имею в виду под этим.

$(document).ready(function() {
    $("#toggle_value").click(function(){
       if ($("#div1).is(':visible')) { // Second click
            // Hide all divs and show d2
            $("#div1").hide();
            $("#div2").show("fast");
            $("#div3").hide();
            $("#div4").hide();
       } else if ($("#div2").is(':visible')) { // Third click
            // follow above example for hiding all and showing div3
       } else if ($("#div3").is(':visible')) { // Fouth click
            // follow above example for hiding all and showing div1
       } else { // first click
            // All divs should be hidden first. Show div1 only.
            $("#div1").show("fast");
       }
    });
});

Просто чтобы предупредить вас - я не проверял этот код :) На основании следующего для определения видимости: http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_determine_the_state_of_a_toggled_element.3F

Надеюсь, это поможет

Answer 2

Простой способ - ввести переменную, которая отслеживает клики, примерно так:

var tracker = 0;    
$(document).ready(function() {
    $("#toggle_value").click(function(){
       if(tracker == 0)
       {
          $("#div1").show("fast");
       }else if(tracker ==1)

       etc etc

       tracker ++;

    });
});