Jquery показывает div один за другим - PullRequest
Новая
       5

Jquery показывает div один за другим

0 голосов
/ 11 сентября 2011

скажем, у меня есть 10 div с тем же идентификатором, теперь 9 из них скрыты на странице, и виден только один, я хочу, чтобы, как только человек нажал следующую кнопку, он должен скрыть первую и показать следующую после этого и так далее, проблема в том, что все они имеют одинаковые идентификаторы, так как я могу достичь этого

нужна помощь Спасибо

Ответы [ 3 ]

2 голосов
/ 11 сентября 2011

Вот другой способ без использования счетчика. Это также правильно обрабатывает переход к первому div после последнего.

Рабочая демоверсия 

$('#next').click(function() {
    var $shownDiv = $('div.content').not('.hidden');
    if ($shownDiv.next('.hidden').length === 0) {
        $('div.hidden:first').removeClass('hidden').show();
    } else {
        $shownDiv.next('.hidden').removeClass('hidden').show();
    }
    $shownDiv.addClass('hidden').hide();
});
1 голос
/ 11 сентября 2011

Во-первых, вы не должны использовать один и тот же идентификатор для нескольких элементов на своей странице.

Вместо этого используйте классы.<div class="myclass">.

Если вы используете следующую кнопку, одну вещь, которую вы можете сделать, это вести учет того, где вы находитесь, в массиве элементов вашего класса, скрывать все элементы этого класса ипокажите тот, с индексом, в котором вы находитесь.

Я быстро нарисую для вас демо.

Обновление

Вот оченьбазовый демонстрационный пример, для которого вы: http://jsfiddle.net/SENqj/

var item0 = $(".myItems").first().show();
var counter = 1;

$("#toggler").click(function(){
    $(".myItems").hide();
    var currentItem = $('.myItems').get(counter);
    $(currentItem).show();
    counter++;
});

Обновление 2:

Чтобы обеспечить циклическое перемещение предметов, просто включите эту одну строку в поле клика вверху: 

counter = (counter < $(".myItems").length)? counter : 0;
0 голосов
/ 11 сентября 2011

Я не уверен, что приведенные ответы являются лучшим решением, но я так думаю. Я провел последние минуты, придумывая это. 

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>

        <script type="text/javascript">
        function next_page() {

            // make new page part active
            $( ".active_part" ).next( ".hidden_page_part" ).addClass( "active_part" ).removeClass( "hidden_page_part" );;

            // disable first page part (make it non-active)
            $( ".active_part" ).first().removeClass( "active_part" ).addClass( "hidden_page_part" );
        }
        </script>

        <style type="text/css">
        .hidden_page_part {
            display: none;
            visibilty: hidden;
        }
        </style>
    </head>
    <body>
        <div>
            <div class="active_part">Show me 1st</div>
            <div class="hidden_page_part">Show me 2nd</div>
            <div class="hidden_page_part">Show me 3rd</div> 
            <div class="hidden_page_part">Show me 4th</div>
        </div>

        <input type="button" value="Next" onclick="next_page();" />
    </body>
</html>
...