jquery在兩個帶有鏈接的圖像之間切換

我有一個包含五個鏈接的頁面。每個鏈接打開一個燈箱（使用prettyphoto）與兩個圖像（用戶可以切換這些）和一個段落。jquery在兩個帶有鏈接的圖像之間切換

我有一個簡單的Jquery腳本，在兩個圖像之間切換。

請參閱jsfiddle。

$(document).ready(function() { 
    $('a.unactive').live('click', function(){ 
    $('a.button').toggleClass('unactive'); 
    $('div.show').toggle('blind','',500); 
    console.log('clicked'); 
}); 

});

此功能正常工作。當用戶在燈箱中的圖像之間切換時，以及當他們關閉燈箱並打開一個新燈箱時，會顯示這個問題，這兩個圖像都會顯示出來。 請看這裏的問題的一個例子：jsfiddle。

總之，我無法在頁面之間切換燈箱並正確使用此切換功能。我只能在一個燈箱中的兩個圖像之間切換，而不必刷新頁面。

我的問題是我如何修改這個Jquery函數，以便在用戶打開和關閉頁面上的不同燈箱時工作？是否有一些我可以使用的重置或者是否應該修改HTML結構？或者是否有另一種切換圖像的方法？

非常感謝。

來源

2012-12-18 hellofavision

你有唯一標識，每個燈箱嗎？ –

是的，我給每個div保存lightbox內容自己的唯一ID。 – hellofavision

您的圖片標籤應該以：'「/>'不''>' –

對不起，我不同意到目前爲止所做的推論。我認爲在prettyphoto中有一個錯誤。當你顯示/隱藏時，它會創建一個新的容器並將代碼複製到它。在複製期間，CSS顯示：div的none屬性正在丟失。事實上，當你認爲自己正在使用2個元素（兩個鏈接或兩個div）時，你正在使用4.2原始版本和2個克隆版本。

簡單的解決方法是隻用克隆的工作：

$(document).ready(function() { 
    $('a.button.unactive', "div.pp_content_container").live('click', function() { 
     $('a.button', "div.pp_content_container").toggleClass('unactive'); 
     $('div.show', "div.pp_content_container").toggle('blind','',500); 
     console.log('clicked'); 
    }); 
});

看到它的工作：http://jsfiddle.net/HU8zx/114/

來源

2012-12-18 18:25:10 closure

謝謝你，先生。這是太棒了。 – hellofavision

我認爲這個問題與這種內聯風格有關：嘗試刪除它。

<div id="thediv" style="display:none;">

來源

2012-12-18 17:39:48

我認爲這可能是一個開始。但是，現在所有的燈箱內容都默認顯示，並且需要隱藏並且只有在用戶點擊鏈接時纔會顯示。 – hellofavision

嘗試給予'＃thediv'大幅度：http://jsfiddle.net/HU8zx/113/ 而不是'display：none' –

這似乎解決了問題，但現在頁面有一個巨大的水平滾動。無論如何，可以修復？ – hellofavision

jquery在兩個帶有鏈接的圖像之間切換

回答

相關問題