2

我在 Flash 轮播中有 10 个图像,这些图像设置为通过 XML 文档触发 jquery 命令

IE:

<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 语句还是什么?我很困惑。

提前感谢您对此的任何帮助

4

3 回答 3

0

抱歉应该包括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>
于 2010-01-24T18:40:42.200 回答
0

万一这将有助于将来的任何 1 卡里姆告诉我这样做:

function toggleDetail1() {
$('.toggleitem').hide();
$('#bookdetail1').show(); }
于 2010-01-24T19:13:35.527 回答
0

这就是我的做法:

<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
        }
    */
});
于 2016-09-17T20:34:59.017 回答