Question

我正在尝试制作上一页 - 下一页在页面上的内容之间滑动。我有以下标记：

<div class="right">
     <a href="javascript:;" class="light-button" id="previous-button">Previous</a>
     <a href="javascript:;" class="light-button" id="next-button">Next</a>
 </div>
 <?php foreach ($chapters as $chapter) : ?>
 <div id="chapters-container-<?php echo $chapter->id; ?>" style="display: none">
     <div class="left">
         <h1 class="hmc"><?php echo $chapter->title; ?></h1>
     </div>
     <ul class="attachments scroll-pane">
     <?php foreach ($chapter->files as $file) : ?>
     <!--video zone-->
         <?php if ($file->extension == '.mpeg') : ?>
         <li class="wide">
             <img src="" />
             <span class="duration hmc"><?php $file->duration; ?></span>
             <h1 class="hmc">The title is a title</h1>

         </li>
         <?php endif; ?>                              
     <?php endforeach; ?>
     </ul>
</div>
<?php endforeach; ?>
</div>

基本上我用PHP动态生成一些内容。我已经包装了div中生成的每个内容，我不会只使用jQuery显示它。现在我尝试做类似的事情：


$('body').on('click', 'a#next-button', function(){
    $('#chapters-container-').next();
});

但是它不能正常工作。当我根据我正在生成的标记在prev和next按钮之间切换时，如何更改内容。

Answer 1

我认为你没有得到什么

$('#chapters-container-').next();

一样。根据文档，这是

获取该组中每个元素的紧随其后的兄弟匹配的元素。如果提供了选择器，它将检索下一个选择器兄弟姐妹只有匹配那个选择器。

所以你只是在id = chapters-container -

的元素之后选择下一个元素

你应该这样做：

$('body').on('click', 'a#next-button', function(){ 
  var visisbleContainer = $('div[id^=chapters-container-]:visible');
  visisbleContainer.next().show();
  visisbleContainer.hide(); 
});

Answer 2

当用户点击下一个按钮时，获得可见的div（chapter）id属性。您将收到章节id为此章节id添加1并生成另一个字符串，例如chapters-container-2。

现在隐藏当前div并显示生成的字符串的div，即$（'＃'+ newstring）.show（）

prev - 使用jquery显示下一个动态内容

2 个答案: