jquery腳本路障：如何顯示/隱藏多個div的多個圖像？

我有一點網頁設計，我試圖用高效的Jquery來解決，而且它讓我在過去的一天中難倒了。所以我想我會轉向StackOverflow的專家尋求幫助。jquery腳本路障：如何顯示/隱藏多個div的多個圖像？

挑戰：

我有三個格列的頁面。第1列顯示全分辨率圖像。第2列顯示了第1列中當前顯示的元素的大縮略圖。第3列是一個選擇器列，顯示了我可以添加的所有可用元素。

我一直沒有運氣到代碼中使用jQuery的高效以下兩個函數：

如果你點擊第3列（全選擇列）的任何項目 - 它相應地使DIV的項目在2可見和可見1
如果單擊關閉按鈕任何項目第2欄，它隱藏在列2對應的股利和第1列

相應的div見例如：http://jsfiddle.net/mzhang23/CGfzq/8/ - 這個試圖impl下面的html5「data-eltype」建議解決方案沒有運氣。我究竟做錯了什麼？

來源

2011-07-12 mztwo

這是一個巨大的屁股問題。 – AlienWebguy

我認爲關鍵是你應該正確地將數據存儲在對象中。您可以通過CSS描述符或HTML5樣式的數據來執行此操作。

你的對象則是這樣的：

<div class="columnA"> 
    <div class="element house"></div> 
</div> 

<div class="columnB"> 
    <div class="element house"></div> 
</div> 

<div class="columnC"> 
    <div data-eltype="house" class="element"></div> 
</div> 

<script type="text/javascript"> 
$(document).load(function(){ 
    $('.columnC .element).click(function(){ 
     $('.columnA, .columnB').find('.' + $(this).data('eltype')).show(); 
    }); 
}); 
</script>

雖然有方法可以做到這幾十個，上面介紹的是利用兩個CSS選擇器與HTML5數據一起代碼的簡單一點。當點擊columnC中的對象時，它利用eltype數據描述符切換列中項目的可見性A & B.

如果您需要額外的幫助，您可以考慮構建一個JSFiddle，其中包含更詳細的對象集這個基本級別的描述。

來源

2011-07-12 00:19:29

感謝您的建議 - 但我仍然無法使用它（目前僅使用現在已應用數據eltype的襯衫進行測試）。看到這個jsfiddle：http://jsfiddle.net/mzhang23/CGfzq/8/ 似乎.find（'。'+ $（this）.data（'eltype'））沒有拉入正確的代碼？因爲如果我手動鍵入我想要搜索的類，那麼該函數就可以工作。 – mztwo

謝謝 - 您的解決方案確實有效;我只有一箇舊版本的Jquery。 – mztwo

jquery腳本路障：如何顯示/隱藏多個div的多個圖像？

回答

相關問題