使用php循環創建的一個頁面上的多個圖像滑塊

我使用wordpress循環訪問我的帖子，並返回來自每個帖子的5個圖像。然後我將這5個圖像加載到一個滑塊中。我循環瀏覽了10頁，它在一頁上總共返回10個滑塊。潛在地，網站的管理員可以創建無限量的帖子（投資組合項目），產生無限量的滑塊（每頁10個，分頁）。使用php循環創建的一個頁面上的多個圖像滑塊

許多jQuery滑塊插件允許在一個頁面上使用多個滑塊，但它們都需要用獨特的選擇器調用它們。例如，前5個滑塊將被稱爲像這樣：

$("#portfolio-slider-1").bxSlider(); 
$("#portfolio-slider-2").bxSlider(); 
$("#portfolio-slider-3").bxSlider(); 
$("#portfolio-slider-4").bxSlider(); 
$("#portfolio-slider-5").bxSlider();

如果我有300個滑塊，將有300個電話......現在犯規，似乎沒有必要？特別是在wordpress有一個共同的header/footer.php時 - 它會在每個頁面上調用這些調用（即使是沒有這些滑塊容器的頁面）。完全沒有必要。

而另一個問題是分配WordPress的動態生成的帖子（投資組合項目）與一個唯一的ID。由於WordPress正在循環發佈帖子，因此無法爲每個帖子分配1的ID，然後是2，然後是3等等。 Wordpress會給每個帖子一個.portfolio-slider的類，這不會與jQuery滑塊插件一起使用。

這似乎不正確。但是，再次，我不能想到一個好的解決方案，將允許在一個頁面上有許多滑塊，並帶有一個通用的類名稱。我已經嘗試過那麼多插件，但它不起作用。他們都需要唯一的ID！所以我想我的問題是，我該如何在一個頁面上添加許多圖像滑塊以允許動態生成項目（必須是類名稱，而不是ID）？

來源

2012-01-24 JCHASE11

你應該能夠凝結在多個.bxSlider（）與此呼籲：

$('[id^="portfolio-slider-"]').each(function(){ 
    $(this).bxSlider(); 
});

這基本上轉化爲：對於具有與開頭的ID每個元素「投資組合slider-」召.bxSlider（）就可以了。

要使用.portfolio滑塊類代替，並應用.bxSlider（）到每一個單獨：

$('.portfolio-slider').each(function(){ 
    $(this).bxSlider(); 
});

這裏的關鍵是使用每個，所以功能被單獨應用到每個元件而不是收集所有元素。

來源

2012-01-25 22:42:37 jmoerdyk

您的回答非常好！我碰巧遇到了同樣的問題（ish）。無論如何，它不會爲我循環。它只激活一次（我正在使用警報進行調試），我只收到一個警報。第一個滑塊完美工作，因此代碼中不會出現任何錯誤。任何解決方案？ – NoobishPro

使用php循環創建的一個頁面上的多個圖像滑塊

回答

相關問題