我如何使下一步和上一个按钮来操作div显示

Question

我需要制作一个演示文稿，其中每个页面的内容位于一个div中。html看起来像这样:

<div id="p1" style="display:block;">
 //content goes here
   <div id="nav">
     <img class="imgSwap" id="nextBtn">
   </div>
</div>
<div id="p2" style="display:none;">
 //content goes here
  <div id="nav">
     <img class="imgSwap" id="previousBtn">
     <img class="imgSwap" id="nextBtn">
  </div>
</div>
<div id="p3" style="display:none;">
 //content goes here
   <div id="nav">
      <img class="imgSwap" id="previousBtn">
   </div>
</div>

当按下下一个按钮时，当前div的显示设置为none，下一个div的显示设置为block。大概在3到7页之间(确切的数字还不知道)。但是我如何在jQuery中准确地表述这个呢?我不确定如何命名我的div和地址id中的数字。我已经有了处理点击事件的jQuery:

$(function(){  
    $(".imgSwap").mouseenter(function() {
        this.src =  this.src.replace("_off", "_on");
    }).mouseleave(function(){
        this.src =  this.src.replace("_on", "_off");
    }).click(function() {
        alert("Handler for .click() called.");
    });
});

如果这看起来是一个愚蠢的方式来表示信息，这是因为我是在一个固定的，受保护的环境中工作。例如，我不能用iFrames来做这个，也不能用ppt来做演示。我将非常感谢你对这件事的看法。谢谢!

Answer 1

由于不能有多个具有相同ID的元素，因此必须将按钮ID更改为classes:

<img class="imgSwap nextBtn">
<img class="imgSwap previousBtn">

对父母做同样的事情也会更容易:

<div class="parent" style="display:block;">

然后做:

$(function(){  
    $(".imgSwap").on({
        mouseenter: function() {
            this.src =  this.src.replace("_off", "_on");
        },
        mouseleave: function() {
            this.src =  this.src.replace("_on", "_off");
        },
        click: function() {
            var direction = $(this).hasClass('nextBtn') ? 'next' : 'prev';
            $(this).closest('.parent').hide()
                   [direction]('.parent').show();
        }
    });
});

检查按钮是"下一个"还是"上一个"按钮，并相应地更改jQuery方法next()和prev()。隐藏当前.parent，显示下一个/上一个.parent。现在你所要做的就是弄清楚什么时候没有更多的.parent元素要显示(提示:使用length)

Answer 2

为所有页面添加一个类(id为'p#'的)

然后在点击功能中，像这样做:

var parent = $(this).closest('yourClass')
parent.css('display', 'none');
if(this.id == 'previousBtn'){
    parent.prev('yourClass').css('display', 'block')
else{
    parent.next('yourClass').css('display', 'block')
}