通过单击下一步和后退按钮显示一组div
我有5个包含副本的div。
我有一个后退和下一个按钮，以显示每个div。
Back | Next this is example copy this is some more copy some more copy this is the last 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来显示而不修改代码。 感谢任何帮助，谢谢。
这是你的解决方案。 我已根据您的要求创建了Fiddle 。
HTML代码：
Back | Next this is example copy this is some more copy some more copy this is the last 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;}
你的HTML文件：
Back | Next this is example copy this is some more copy some more copy this is the last div
您在同一目录中的新“code.js”文件：
/** * The zero-based index of the 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”。
看一下jquerys .next（）函数进行导航 – jQuery – Next（） 。 你也可以检查这样的最后一项。
if($(this).is(':last-child')) { $('.next-btn').removeClass('off'); }else{ $('.next-btn').addClass('off'); }
每次单击导航按钮时检查，并对第一个按钮执行相同操作