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顯示整個陣列需要它一次只顯示一個值

回答

相關問題