jQuery-根据用户输入显示/隐藏 - jQuery - show/hide based on user input

我的页面上有以下div：

<div id="page1">
    Some content
</div>
<div id="page2">
    More content
</div>
<div id="page3">
    Even more content
</div>

在页面底部，我有两个按钮Continue和Back——我需要做的是根据用户输入显示和隐藏div。

默认情况下，当用户单击Continue'页面2 is shown and页面1和3 are hidden - if the user clicks the返回button then页面1时，应显示page1，其他页面隐藏，依此类推

我对如何在jQuery中实现这一点有一个完整的想法——欢迎任何帮助。

您需要将这些元素放置在容器中，然后使用prev和next遍历它们。类似这样的东西：

$('.next').click(function() {
    $('.sequence-container div').hide();
    var $next = $('.sequence-container div:visible').next();
    $next.length ? $next.show() : $('.sequence-container div:first').show();
});
$('.prev').click(function() {
    $('.sequence-container div').hide();
    var $prev = $('.sequence-container div:visible').prev();
    $prev.length ? $prev.show() : $('.sequence-container div:last').show();
});

小提琴示例

更新

为了防止循环从开始/结束使用这个：

$('.next').click(function() {
    var $next = $('.sequence-container div:visible').next();    
    if ($next.length) {
        $('.sequence-container div').hide();
        $next.show();
    }
});
$('.prev').click(function() {
    var $prev = $('.sequence-container div:visible').prev();
    if ($prev.length) {
        $('.sequence-container div').hide();
        $prev.show();
    }
});

更新的fiddle

首先，您必须给所有这些页面一个类，比如page。然后在按钮上添加一个处理程序：

$('.button_prev').click(function(e){
    var block   = $('.page:visible'),
        prev    = block.prev();
    if (prev.length) {
        prev.show();
        block.hide()
    }
});
$('.button_next').click(function(e){
    var block   = $('.page:visible'),
        next    = block.next();
    if (next.length) {
        next.show();
        block.hide()
    }
});

嗯，完成它并收到其他回复，我的感觉可能有点奇怪

$(document).ready(function() {
//Your first page
var curPage = 1;
//your number of pages
var nbPage = 3;
$("#page2").hide();
$("#page3").hide();
$("#next").click(function(event){
    if (curPage+1 <= nbPage) curPage += 1;
    for(var i = 1; i<=3; i++){
        if (i == curPage) $("#page"+curPage).show();
        else $("#page"+i).hide();
    }
});
$("#back").click(function(event){
    if (curPage-1 >= 1) curPage -= 1;
    for(var i = 1; i<=3; i++){
         if (i == curPage) $("#page"+curPage).show();
        else $("#page"+i).hide();
    }
});
});

这是HTML。

<div id="page1">
   Some content
</div>
<div id="page2">
    More content
</div>
<div id="page3">
    Even more content
</div>
<button id="back">back</button>
<button id="next">next</button>

您可以查看此工作演示：http://jsfiddle.net/kJ45a/2/

（对于其他人，如果这种方式不好，请随时反馈）

您可以使用jQuery(http://api.jquery.com/toggleClass/)要更改要切换的元素的类，并在css文件中让这些类使用适当的"display"值http://www.w3schools.com/cssref/pr_class_display.asp

您需要将click()事件绑定到页面底部的按钮。既然你没有在标记中列出它们，那么我会猜它们是这样的：

标记：

<button class="back">Back</button>
<button class="continue">Continue</button>

现在，当用户单击按钮时，您将需要jQuery中的实际绑定，如下所示：

JavaScript:

$('.continue').click(function() {
    // Logic goes here for what should happen when user clicks Continue button
});
$('.back').click(function() {
    // Logic goes here for what should happen when user clicks Back button
});

虽然我知道你不是在用图像做幻灯片，但你的导航非常像幻灯片，所以请查看这个jsFiddle

这是我制作的一个基本示例：

JQuery部分：

$(document).ready(function() {
$("#page2").css('visibility', 'hidden');
$("#page3").css('visibility', 'hidden');
$("#continue").click(function(){
  $("#page1").css('visibility', 'hidden');
  $("#page2").css('visibility', 'visible');
});
$("#back").click(function(){
  $("#page1").css('visibility', 'visible');
  $("#page2").css('visibility', 'hidden');
});
});

HTML部分：

<div id="page1">
Some content
</div>
<div id="page2">
More content
</div>
<div id="page3">
Even more content
</div>
<input type="button" id="continue" value="continue" />
<br/>
<input type="button" id="back" value="back" />

PS：请参阅此处的工作小提琴：http://jsfiddle.net/UKnrE/1/