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

Question

我想覆盖一个寻呼机#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>

Answer 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在第二张幻灯片上消失了，因为你把它放在了第一张幻灯片的包装上。

Answer 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>