JQUERY - 确保当用户单击其相应图像时仅显示特定类的一个 div ID，其余设置为隐藏

Question

我在 flash carousel 中有 10 个图像，设置为通过 XML 文档触发 jquery 命令

即:

<photo image="images/01.jpg" url="javascript:toggleDetail1()" target="_self">
<photo image="images/02.jpg" url="javascript:toggleDetail2()" target="_self">

etc...

当用户单击图像时，我想确保只显示特定图像的相应 div，而隐藏其他 9 个。

我已经为所有 10 个 div 指定了“toggleitem”类，并且每个 div 都有自己的 ID(“detail1”、“detail2”等)所以现在我需要编写我的 jquery，我有点迷路了。

到目前为止，我已经了解了当我单击轮播中的图像时，我想要显示的 div 将显示的地步。但我真的不知道如何让“toggleitem”类中的其他 div 在此时隐藏。

<script type="text/javascript">

function toggleDetail1() {
$('#bookdetail1').show();}

function toggleDetail2() {
$('#bookdetail2').show();}

etc...

我需要使用 .not() 选择器、if 语句还是什么？我很困惑。

在此先感谢您对此的任何帮助

Answer 1

抱歉应该包含 html:

<div class="toggleitem" id="bookdetail1">
<span class="cover"><img src="images/details/1/cover-1.jpg"</span>
<span class="spread"><img src="images/details/1/spread-1.jpg"</span>
<span class="blurb">text text text text text.</span>
</div>