切換一系列圖像的可見性：pie_1.png，bar_1.png，pie_2.png，bar_2.png

Question

我有webpages，有幾個（以及更多即將到來的）類型的數據，每個數據都由一個條形圖和一個餅圖Google圖表圖像：

<h3>Data_1</h3> 
<p class="chart" align="center"> 
<img class="primary" src="pie_1.png"> 
<img class="secondary" src="bar_1.png"> 
</p> 

<h3>Data_2</h3> 
<p class="chart" align="center"> 
<img class="primary" src="pie_2.png"> 
<img class="secondary" src="bar_2.png"> 
</p> 

.... 

最初我想顯示餅圖和隱藏條形圖。

當用戶點擊餅圖時，我想用a slide effect將其切換到條形圖。

我想，我有一個好主意如何用jQuery做到這一點 - 使用個人ID，如＃pie_1，＃bar_1，＃pie_2，＃bar_2，...

但我想知道，如果在這裏可以採用更一般的方法？

Answer 1

您可以使用.next()和.prev() jQuery方法，就像這樣：

bars.click(function() { 
    $(this).slideUp().next().slideDown(); 
}); 
pies.click(function() { 
    $(this).slideUp().prev().slideDown(); 
});