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

【问题标题】：prev - next dynamic content display with jqueryprev - 使用 jquery 显示下一个动态内容
【发布时间】：2012-02-28 10:07:32
【问题描述】：

我正在尝试在页面上的内容之间进行 prev - next 滑动。我有以下标记：

<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();
});

但 ofc 并没有按我的意愿工作。当我根据生成的标记在上一个和下一个按钮之间切换时，如何更改内容。

【问题讨论】：

下一个按钮需要具有某种类型的附加功能。你在使用 jQuery 工具吗？您是否正在创建自定义下一个功能？你在切换 LI 吗？
没有。我已经用 ajax 获取了内容并生成它......我只需要在生成的 div 之间滑动
您是否尝试向每个项目添加一个带有“显示：无”的类以隐藏它们。一个类来选择当前可见的，然后使用 next()/prev()/css() 来改变它们？
不，我还没有尝试这样做

标签： php jquery jquery-selectors slider

【解决方案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(); 
});

【讨论】：

我需要整个 div <div id="chapters-container-<?php echo $chapter->id; ?>" style="display: none"> 来移动
仍然无法正常工作...firebug 显示它在var visisbleContainer = $('div[id^=chapters-container-]:visisble'); 之后中断我现在将尝试调试它..您有一个错字..但它仍然无法按预期工作
@Mythriel 我有一个错字。我需要查看生成的标记，因为 visisbleContainer.next() 可能不行。您可以在 jsfiddle 上发布生成的标记吗？
不再需要...我想通了... visibleContainer 是页面上具有该 id 的最后一个 div，这就是它无法正常工作的原因

【解决方案2】：

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

现在隐藏当前 div 并显示生成字符串的 div 即 $('#'+ newstring).show()

【讨论】：