通过单击下一步和返回按钮显示一组 div答案

【问题标题】：displaying a group of divs by clicking next and back buttons通过单击下一步和返回按钮显示一组 div
【发布时间】：2014-07-28 21:26:27
【问题描述】：

我有 5 个包含副本的 div。

我有一个返回和下一步按钮，用于显示每个 div。

<a href="" class="back-btn off">Back</a> | <a href="" class="next-btn">Next</a>

<div class="vote-result first">
  this is example copy
</div>

<div class="vote-result">
  this is some more copy
</div>

<div class="vote-result">
  some more copy
</div>

<div class="vote-result">
  this is the last div
</div>

// 隐藏除第一个之外的 div。

.vote-result { display: none; }
.vote-result.first { display: block; }

第一次单击下一个按钮链接时，我想删除关闭类，以将其显示为可点击，我可能最初也应该禁用该链接并重新启用它。

$(".back-btn").removeClass("off");

显示最后一个 div 后，我需要将 off 类添加到 next-btn 并禁用它。

我曾想过使用轮播 js 插件来实现这一点，但现在有点过头了。

我知道一种方法可以做到这一点，但它会涉及根据单击的下一步或返回按钮为链接分配子类，因此它会知道接下来要显示的 div，以及删除或添加关闭类到链接。

我希望找到一种解决方案，让我可以在不修改代码的情况下添加更多的 div 来显示。任何帮助表示赞赏，谢谢。

【问题讨论】：

我主张我对 Ashish 的回答，因为我使用 JavaScript 变量而不是 DOM 结构来跟踪页面的状态。当您开始编写越来越高级的 JavaScript 时，将界面状态（哪个元素处于活动状态）与界面的 DOM 结构（元素如何呈现）隔离的能力变得越来越重要，因为 DOM 结构很可能会频繁更改（或者在您忘记 DOM 如何表示数据时需要在很久以后进行更改）。我的答案仍然依赖于 DOM，但更加孤立。

标签： javascript jquery html css

【解决方案1】：

这是为您提供的解决方案。我已根据您的要求创建了Fiddle。

HTML 代码：

<a class="back-btn off">Back</a> | <a class="next-btn">Next</a>

<div class="vote-result first selectedDiv">
  this is example copy
</div>

<div class="vote-result">
  this is some more copy
</div>

<div class="vote-result">
  some more copy
</div>

<div class="vote-result last">
  this is the last div
</div>

JS/JQuery 代码：

$(".back-btn").click(function(){debugger;
    var prevElement=$('.selectedDiv').prev();
    prevElement.show();
    $(".selectedDiv").hide();                         
    $(".selectedDiv").removeClass("selectedDiv");
    prevElement.addClass("selectedDiv");                            

   if($('.first').css('display')=="block"){
       $(".back-btn").addClass("off");
   }
   else{
    $(".next-btn").removeClass("off");  
   }
});

$(".next-btn").click(function(){debugger;
    var nextElement= $('.selectedDiv').next();
    nextElement.show();
    $(".selectedDiv").hide();                         
    $(".selectedDiv").removeClass("selectedDiv");
    nextElement.addClass("selectedDiv");
    if($('.last').css('display')=="block"){
      $(".next-btn").addClass("off");
   }
   else{
     $(".back-btn").removeClass("off");  
   }
});

CSS 代码：

.vote-result { display: none; }
.vote-result.first { display: block; }
.off{display:none;}

【讨论】：

【解决方案2】：

您的 HTML 文件：

<html>
    <head>
        <style>
            .vote-result { display: none; }
            .vote-result.first { display: block; }
            .off {
                color: Red;
            }
            a {
                color: blue;
            }
        </style>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="code.js"></script>
    </head>
    <body>
        <a href="" class="back-btn off">Back</a> | <a href="" class="next-btn">Next</a>

        <div class="vote-result first">
          this is example copy
        </div>

        <div class="vote-result">
          this is some more copy
        </div>

        <div class="vote-result">
          some more copy
        </div>

        <div class="vote-result">
          this is the last div
        </div>
    </body>
</html>

您在同一目录中的新“code.js”文件：

/**
 * The zero-based index of the <div class="vote-result"> element that is currently being shown
 * @var {Number}
 */
var activeIndex = 0;

function getNumberOfItems() {
    return $('.vote-result').length;
}

function synchronizeInterface() {
    var numberOfItems = getNumberOfItems(),
        lastIndex = numberOfItems - 1;

    $('.vote-result').removeClass('first');
    $('.vote-result').each(function(index) {
        if (index == activeIndex) {
            $(this).addClass('first');
        }
    })

    $('.back-btn').toggleClass('off', activeIndex == 0);
    $('.next-btn').toggleClass('off', activeIndex == lastIndex);
}

$(function() {
    $('.back-btn,.next-btn').on('click', function() {
        // If the button clicked is not deactivated
        if (!$(this).hasClass('off')) {
            // Determine whether the "Next" button was clicked (otherwise "Back" was clicked)
            var clickedNext = $(this).hasClass('next-btn');

            // Move the active index in the appropriate direction while not allowing it to fall outside the boundaries of appropriate indices
            activeIndex = clickedNext
                ? Math.min(activeIndex + 1, getNumberOfItems() - 1)
                : activeIndex = Math.max(0, activeIndex - 1);

            // Make sure the interface now reflects the updated JavaScript variables
            synchronizeInterface();
        }

        return false;
    });
});

一些注意事项：在您提供的 HTML 中，您的一个类属性有一个未闭合的双引号。另外，我添加了一些额外的样式——您可能希望将“.first”CSS 类重命名为“.active”。

【讨论】：

【解决方案3】：

看看 jquerys .next() 导航函数 - jQuery - Next()。你也可以像这样检查最后一项。

if($(this).is(':last-child'))
{
    $('.next-btn').removeClass('off');
}else{
    $('.next-btn').addClass('off');
}

每次点击导航按钮时检查并检查第一个按钮

【讨论】：