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

Question

我在 Flash 轮播中有 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>

Answer 2

万一这对将来有帮助，卡里姆告诉我这样做：

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

Answer 3

我就是这样做的：

<photo image="images/02.jpg" data-detail="bookdetail1">

<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>

然后对所有照片元素运行以下命令：

$("photo").on("click", function(){
    var $this = $(this),
        detail = $this.data("detail"),
        $detail = $("#"+detail);
    // If you want to toggle the show/hide just use .toggle()
    if ($detail) {
        $detail.toggle();
    }
    // If you want to execute additional when you toggle:
    /*
        if ($detail.is(":visible")) {
            $detail.hide();
            // do more stuff when it's hidden
        } else {
            $detail.show();
            // do more stuff when it's shown
        }
    */
});