Question

我有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 class添加到next-btn并禁用它。

我考虑使用旋转木马js插件来实现这一目标，但现在它有点矫枉过正。

我知道一种方法可以做到这一点，但它会涉及根据点击的下一个或后一个按钮为链接分配子类，因此它将知道下一个要显示的div，以及删除或添加off class链接。

我希望找到一个解决方案，允许我在不修改代码的情况下添加更多div来显示。感谢任何帮助，谢谢。

Answer 1

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

HTML code：

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

Answer 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”。

Answer 3

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

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

每次单击导航按钮时都会检查，并对第一个按钮执行相同的操作

通过单击下一步和后退按钮显示一组div

3 个答案: