通过单击下一个和后退按钮显示一组div [英] displaying a group of divs by clicking next and back buttons

问题描述

我有5个div包含副本。

I have 5 divs that contain copy.

我有一个后退和下一个按钮，以显示每个div。

I have a back and next button, to display each 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。

// hide the divs, except the first one.

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

第一次点击下一个按钮链接时，我想删除off类，它可以点击，我可能应该首先禁用链接，并重新启用它。

The first time the next button link is clicked, I want to remove the off class, to show it as clickable, I probably should disable the link initially too and re-enable it too.

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

一旦我显​​示最后一个div，我需要添加off类到next-btn，

Once I display the last div, I need to add the off class to the next-btn and disable it.

我想过使用一个carousel js插件来完成这个工作，但是现在是过度的。

I thought about using a carousel js plugin to accomplish this, but it is overkill for now.

我知道一个方法来做到这一点，但它会涉及到基于下一个或后退按钮被点击链接的子类，所以它会知道下一个显示div，以及删除或添加关闭类链接。

I know of a way to do this, but it would involve assigning subclasses to the links based on what next or back button was clicked, so it will know what div to show next, as well as removing or adding the off class to the links.

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

I am hoping to find a solution that allows me to add more div's to display without modifying the code. Any help is appreciated, thank you.

推荐答案

这里是你的解决方案。我已根据您的要求创建了 小提琴 。

Here is solution for you. I have created Fiddle for your requirement.

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代码：

JS/JQuery Code:

$(".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;}

这篇关于通过单击下一个和后退按钮显示一组div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！