Question

我正在为带有下一个和上一个按钮的调查设置导航结构。我将所有来自单独文件的html加载到index.html文件中，并将每个文件存储在单独的divs中。然后，当有人点击下一步时，它会隐藏当前的div并显示下一个div。如果我在按钮内部对div的名称进行硬编码，但我想要一种更简单的导航方式，我就可以使用它。我想我会在jQuery中使用next()和prev()，这样如果我想重新构建布局，我就不必进入并重新编写所有单独文件中的名称。以下是我index.html文件中的结构：

    <div class="Page" id="DealerInfo" style="display: block;">
            <script>$( "#DealerInfo" ).load( "formPages/DealerInfo.php" );</script>
    </div>

    <div class="Page" id="AdditionalLocations" style="display: none;">
        <script>$( "#AdditionalLocations" ).load( "formPages/AdditionalLocations.php" );</script>
    </div>

    <div class="Page" id="OwnerInfo" style="display: none;">
        <script>$( "#OwnerInfo" ).load( "formPages/OwnerInfo.php" );</script>
    </div>

这是我显示下一个div的函数，但它不会将display: block设置为它为所有div设置的下一个div。你可以看到

function nextPage() {
    $( "div" ).prev(".Page").css( "display", "none" );
    $( "div" ).next(".Page").css( "display", "block" );
}

这是我在第一个DealerInfo页面上调用它的方式：

<p class="navigation"><button class="button" type="button" onclick="nextPage();">Next</button></p>

如果您发现DealerInfo是显示display: block设置的第一个Div，则其下方的所有其他div都设置为display: none。当用户点击下一步时，应设置DealerInfo display: none并设置AdditionalLocations display: block我希望这是有道理的。

Answer 1

$("div")选择所有div，因此.next()将获取每个div的下一个元素。你也可能想隐藏当前的div而不是之前的div。我还建议使用show()和hide()代替设置显示。

我想你想要这样的东西：

$(this).hide().next(".Page").show();

修改

$(this)需要是当前显示的页面，具体取决于示例中未显示的详细信息。对于每个类似$(this).parents(".Page")的嵌入式前进按钮，对于一个固定的前进按钮，它就像$(".Page:visible")。

修改

http://jsfiddle.net/Ba7Au/2/ $（ “页：可见 ”）隐藏（）下（“ 页”）显示（）;

。

Answer 2

您的代码$( "div" ).next(".Page").css( "display", "block" );会调用每个div上的.next函数，因此它会在第一个div之后显示每个div。（同样地，$("div").prev(".Page")代码隐藏了除最后一个之外的每个div，尽管这对你没有影响，因为它们已经被隐藏了。）你需要指定你想要从哪个div开始。最简单的方法可能是添加一个名称为有效的类。

<style>
    .Page { display: none; }
    .active { display: block; }
</style>

<script>
$(document).ready(function() {
    $(document).on('click','.button', function() {
            $('.active').removeClass('active').next('.Page').addClass('active');
    });
});

<div class="Page active" id="DealerInfo">
        <script>$( "#DealerInfo" ).load( "formPages/DealerInfo.php" );</script>
</div>

<div class="Page" id="AdditionalLocations">
    <script>$( "#AdditionalLocations" ).load( "formPages/AdditionalLocations.php" );</script>
</div>

<div class="Page" id="OwnerInfo">
    <script>$( "#OwnerInfo" ).load( "formPages/OwnerInfo.php" );</script>
</div>

<p class="navigation"><button class="button" type="button">Next</button></p>

请参阅http://jsfiddle.net/jlansner/HdAXC/

小提琴

显示下一个隐藏的div和隐藏当前显示的div

2 个答案:

修改