0

我需要做一个演示，其中每个页面的内容都位于一个 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>

当按下next按钮时，当前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.");
    });
});

如果这似乎是一种展示信息的愚蠢方式，那是因为我在一个固定的、受保护的环境中工作。例如，我不能为此使用 iFrame，也不能在 powerpoint 中使用演示文稿。我将非常感谢您对此的看法。谢谢！

4

2 回答 2

2

由于您不能拥有多个具有相同 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();
        }
    });
});

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

于 2013-05-03T15:03:16.257 回答
0

向您的所有页面添加一个类（那些具有 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')
}
于 2013-05-03T15:03:24.403 回答