Div显示整个阵列需要它一次只显示一个值

我有这个页面显示图片在一个div。我有jQuery循环以幻灯片显示这些图像。我想要幻灯片是手动的，并有一个幻灯片导航div显示在导航图像的顶部。问题在于，无论我在哪里粘贴我的“幻灯片”div，它都会检索页面上每个图像结果的链接（而不仅仅是页面上的每个结果）。为了更好的参考，请访问this link。如果您检查元素，您将看到div class =“slides”将看起来是整个阵列中的每个图像，并设置一个链接。（我意识到，我现在拥有div的地方使得它能够拍摄整个阵列中的所有图像）。我试着在PHP代码上面设置这个，在foreach下面，在foreach里面，甚至完全在'thumbs'div（它应该存在的地方）之外，结果没有变化。更糟糕的是，我有一个z-index问题，导致我的导航栏显示在所有图像下面，即使z-index设置正确。因此，为了看到我的结果，我必须在Chrome中“检查元素”或关闭图像以查看发生了什么。任何人都有线索？Div显示整个阵列需要它一次只显示一个值

<?php 
         $p=array($condo['Unit']['photo1'],$condo['Unit']['photo2'],$condo['Unit']['photo3'],$condo['Unit']['photo4']); 
     echo '<div class="slides"></div>';   
         if($condo['Unit']['photo1']!=''){ 


          foreach($p as $value) { 
           echo '<a href="/complexes/'; 
           echo $condo['Complex']['complex_name']; 
           echo '/'; 
           echo $condo['Unit']['unitnum']; 
           echo '"><img src="'; 
           echo $value; 
           echo '" style="width:240px; height:160px" /></a>'; 
           } 
          echo '</div>'; 
         } 
         elseif($condo['Unit']['photo1'] == '') { 
           echo '<a href="/complexes/'; 
           echo $condo['Complex']['complex_name']; 
           echo '/'; 
           echo $condo['Unit']['unitnum']; 
           echo '"><img src="/img/img_unavailable.png" /></a>'; 
         } 
       ?>

来源

2011-12-30 huzzah

**更新：我修复了我的z-index问题，现在div正确显示在顶部。 – huzzah 2011-12-30 17:08:02

我还应该提到，变量$ condo本身就是一个结果数组（$ condos），如果这有帮助的话。 – huzzah 2011-12-30 17:28:23

好吧，明白了。问题肯定是在我的幻灯片代码中。我修改我的PHP咯，就像这样：

if($condo['Unit']['photo1']!=''){ 
          echo '<div class="thumbs">'; 

          foreach($p as $value) { 
           if($value !='') { 
            echo '<a href="/complexes/'; 
            echo $condo['Complex']['complex_name']; 
            echo '/'; 
            echo $condo['Unit']['unitnum']; 
            echo '"><img src="'; 
            echo $value; 
            echo '" style="width:240px; height:160px" /></a>'; 
            } 
           } 
          echo '</div>';

然后，这里是我的JQuery周期脚本看起来像：

<script> 

$(function() { 
$('.thumbs').each(function(i) { 
    $(this).append('<div class="overlay slides'+i+'">').cycle({ 
     fx: 'fade', 
     speed: 1000, 
     timeout: 0, 
     pager: '.slides' + i, 
     slideExpr: 'img' 
     }); 
    }); 
});

和它的工作！我用这个线程作为参考，让我开始：Multiple Plugin pagers for different galleries on same page。

我删除了before（）回调并添加了append（）。 yippee的！

来源

2012-01-04 20:38:08 huzzah

我不知道我是否理解你的问题是正确的。这是我的观察：循环插件将所有图像作为用于启动插件的div的直接子项。你在哪里链接为直接的孩子，然后是图像。

此外，你有一个额外的收盘格或缺少开盘格。如果您使用CakePHP，为什么不使用HTML帮助器来呈现链接，图像和其他标签？这是非常有用的，你的代码看起来更干净。（只是我的意见）

来源

2011-12-30 23:41:37 Mo3z

好的，我解决了未封闭的div标签的问题。我在我的图片周围删除了一个标签。循环插件仍然是由于某种原因拉取结果中每个图像的结果，而不仅仅是每个特定单元的图像。至于使用HTML帮手，我一定会这样做。清洁代码总是更好。 – huzzah 2012-01-04 16:18:31

**更新：问题肯定在JQuery中，而不是PHP。我正在通过解决方案工作，一旦工作，就会发布。 – huzzah 2012-01-04 17:18:21

Div显示整个阵列需要它一次只显示一个值

回答

相关问题