切换一系列图像的可见性：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();
});