jquery循环寻呼机#nav在第二张幻灯片上消失答案

【问题标题】：jquery cycle pager #nav disappears on second slidejquery循环寻呼机#nav在第二张幻灯片上消失
【发布时间】：2013-09-05 10:19:47
【问题描述】：

我想覆盖一个寻呼机#nav，就像它在这里所做的那样：http://jquery.malsup.com/cycle/pager-over.html

当下面的代码位于静态 html 站点时，它可以正常工作。但是当我在 Drupal 页面模板中添加它时。我的第二张幻灯片出现了，寻呼机#nav 消失了。这是 DOM/Cache/Drupal 问题吗？导航 div 只需添加一次，它应该出现在所有子 div 幻灯片的顶部。这是我的模型代码：

头部

<script type="text/javascript">
$(function() {
$('#slideshow').cycle({
fx:'fade',
pager:'#nav'
});
});
</script>

html

<div id="slideshow"> 
<div id="slide">
<div id="nav"></div> 
<?php print $node->field_test1_image[0]['view']; ?>
</div> 
<div id="slide">
<?php print $node->field_test2_image[0]['view']; ?>
</div>
</div>

【问题讨论】：

before 或 after 函数会一直显示导航，但我不希望导航出现在滑块之前或之后。我希望它位于滑块 div 内。 $('#slideshow').before('
').cycle({

标签： jquery drupal jquery-cycle

【解决方案1】：

我认为你的标记是错误的。试试这样的：

<div id="slideshow"> 
    <div id="nav"></div> 
    <div class="slide">
        <?php print $node->field_test1_image[0]['view']; ?>
    </div> 
    <div class="slide">
        <?php print $node->field_test2_image[0]['view']; ?>
    </div>
</div>

请注意，id="slide" 已更改为 class="slide" - 应该只有一个元素具有唯一 ID ;)

编辑：我忘了提到 #nav 在第二张幻灯片上消失了，因为你把它放在了第一张幻灯片包装器中。

【讨论】：

我知道我使用了两次 ID。我把它改成了类，但寻呼机导航仍然消失
除了.before或者.after还有其他功能吗？也许是 .embed？
将#nav 元素放在第一张幻灯片之外，就像我在回答中所做的那样。
成功了！谢谢基修。我可能会发布另一个问题，询问您如何像这里一样替换寻呼机号码：jquery.malsup.com/cycle/pager-over.html 使用其他数据，例如标题。

【解决方案2】：

经过更多测试，我发现标题没有循环。如果您使用具有多个项目的嵌套 div 并且您希望每个嵌套 div 循环，则以下是有效的。诀窍是将 #nav 更改为 .nav 并将 .nav 放置在每个嵌套的 div 中。

头

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#slideshow').cycle({
fx:     'fade',
pager:  '.nav'
});
});
</script>

身体

<div id="slideshow"> 
<div class="slide">
<div class="nav"></div>
<?php print $node->field_test1_imagetitle[0]['view']; ?>
<?php print $node->field_test1_image[0]['view']; ?>
<a href="<?php print $node->field_test1_read[0]['value']; ?>">read more</a>
</div> 


<div class="slide">
<div class="nav"></div>
<?php print $node->field_test2_imagetitle[0]['view']; ?>
<?php print $node->field_test2_image[0]['view']; ?>
<a href="<?php print $node->field_test2_read[0]['value']; ?>">read more</a>
</div>
</div>

【讨论】：