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

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

Answer 1

由于您不能拥有多个具有相同ID的元素，您必须将按钮ID更改为类：

<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')
}

如何制作下一个和上一个按钮来操作div显示？

2 个答案: