Question

假设我有10个具有相同ID的div现在其中9个隐藏在页面上，只有一个是可见的，我想要的是一旦一个人点击下一个按钮它应该隐藏第一个并显示下一个在它之后，问题是它们都有相同的id，所以如何才能实现

需要一些帮助谢谢

Answer 1

这是另一种不使用计数器的方法。这也正确地处理了在最后一个之后循环到第一个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();
});

Answer 2

首先，您不应在页面上为多个元素使用相同的ID。

改为上课。 <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;

Answer 3

我不确定给定的答案是否是更好的解决方案，但我想是的。我花了最后几分钟想出这个。

<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>

Jquery逐个显示div

3 个答案: