JQuery - Показать divs один за другим

Question

Мне нужно показать много div (созданных динамически) один за другим, так как использует щелчки previous и метку next.

То, что я пробовал:

HTML:

<div style="display: none;" id="panel_steps_page1" class="pages page1"> </div> 
<div style="display: none;" id="panel_steps_page2" class="pages page2"> </div> 
<div style="display: none;" id="panel_steps_page3" class="pages page3"> </div> 
<div style="display: none;" id="panel_steps_page4" class="pages page4"> </div> 

<span id="btn_previous" class="previous">previous</span> 
<span id="Span1" class="next">next</span> 

Jquery:

$(".page1").show(); 

$(".next").click(function(e) { 
    $(".pages").each(function(index) { 

     if ($(".page" + index).is(":visible")) { 
      $(".page" + index).hide(); 
      $(".page" + (index + 1)).show(); 
     } 
    }); 

}); 

$(".previous").click(function(e) { 
    $(".pages").each(function(index) { 
     if ($(".page" + index).is(":visible")) { 
      $(".page" + index).hide(); 
      $(".page" + (index - 1)).show(); 
     } 
    }); 
}); 

Это не работает, хотя.

Live jsfiddle

Answer 1

Код чрезмерно сложным. Вот более простой вариант, который почти читает вслух так же, как это работает:

$(".next").click(function() { 
    $(".pages:visible").hide().next().show(); 
}); 

$(".previous").click(function() { 
    $(".pages:visible").hide().prev().show(); 
}); 

выше является хорошей отправной точкой, но это может в конечном итоге скрывая все дивы, если вы попытаетесь выйти за пределы. Эта проблема может быть исправлена ​​с небольшой подстройкой:

$(".next").click(function() { 
    $(".pages:visible").hide().next(".pages").addBack().last().show(); 
}); 

$(".previous").click(function() { 
    $(".pages:visible").hide().prev(".pages").addBack().first().show(); 
}); 

See it in action.

Update: Edited код (но не скрипка), чтобы заменить .andSelf() с .addBack(), основываясь на комментарий insertusernamehere в поле ниже.

Answer 2

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

$(document).ready(function(){ 
    $(".page1").show(); 

    $(".next").click(function(e) { 
     var next = $(".pages:visible").next(".pages"); 
     if(next.length >0){ 
      $(".pages:visible").hide(); 
      next.show(); 
     } 
    }); 

    $(".previous").click(function(e) { 
     var prev = $(".pages:visible").prev(".pages"); 
     if(prev.length > 0){ 
      $(".pages:visible").hide(); 
      prev.show(); 
     } 
    }); 
}); 

Рабочий пример: http://jsfiddle.net/envDx/1/

Answer 3

Там ваша обновленный Fiddler.

$(".next").click(function(e) { 
    var $visibleOne = $(".pages:visible"); 
    var $nextToBeVisible = $visibleOne.next('div.pages'); 

    if($nextToBeVisible.length > 0) { 
     $visibleOne.hide(); 
     $nextToBeVisible.show(); 
    } 

}); 

$(".previous").click(function(e) { 
    var $visibleOne = $(".pages:visible"); 
    var $PrevToBeVisible = $visibleOne.prev('div.pages'); 

    if($PrevToBeVisible.length > 0) { 
     $visibleOne.hide(); 
     $PrevToBeVisible.show(); 
    } 
}); 

Answer 4

$(".next, .previous").click(function(e) { 
    var $p = $('.pages:visible'), 
     m = this.className == 'next' ? 'next' : 'prev'; 
    if ($p[m]('.pages').length) $p.hide()[m]().show(); 
}); 

http://jsfiddle.net/xMaZQ/

Answer 5

Я использовал другое решение, более оптимизированный, потому что во избежание каждой итерации.

$(".next").click(function(e) { 
    var shown = $(".pages.visible").hide().removeClass('visible'); 
    var index = (shown.index() + 1) % 4; 

    $(".page"+index).show().addClass('visible'); 
}); 

$(".previous").click(function(e) { 
    var shown = $(".pages.visible").hide().removeClass('visible'); 
    var index = shown.index(); 
    index = (index == 0)? 3: index - 1; 

    $(".page"+index).show().addClass('visible'); 
}); 

Попробуйте мое решение here и пусть мой знать, если он работает для вас