0

我正在制作活动日历，活动的“详细信息”位于隐藏的 div 上。我有一个小图标，单击该图标时，会使用 javascript 显示详细信息。

我想要的是，单击此图标时，该图标将替换为不同的图标（以显示它是“打开的”），并且单击该图标时，该图标将再次关闭 div。

所以当前的代码是

<a href="#" onclick="Effect.BlindDown('eventdetails<?php echo $event_count;?>'); return false;"><img class="open" src="./img/plus.png"></a>

我希望图像更改为“minus.png”。那么它会是

<a href="#" onclick="Effect.BlindUp('eventdetails<?php echo $event_count;?>'); return false;"><img class="open" src="./img/minus.png"></a>

但不能完全弄清楚。有任何想法吗？

更新

感谢 Mia，让下面的代码工作。按钮...

<a href="#" onclick="toggleDisplayWait('eventdetails<?php echo $event_count;?>', 'icon<?php echo $event_count;?>', 800); return false;"); return false;"><img id="icon<?php echo $event_count;?>" class="open" src="./img/plus.png"></a>

在标题中...

    <script type="text/javascript" language="javascript">

    function toggleDisplayWait(divId, imgId, durationmSec) {
    if(!$(divId).visible()) {
        move = Effect.BlindDown;
        newImage = "./img/minus.png";
    }
    else {
        move = Effect.BlindUp;
        newImage = "./img/plus.png";  
    }        
    move(divId, {duration: durationmSec / 1000.0 });
    setTimeout(function() { $(imgId).src = newImage; }, durationmSec)
}

    </script>
4

1 回答 1

1

假设小猫是 + 号，黑色图像是 -。我写了两个版本，在第一个（toggleDisplay）中，图像立即改变。您可能想要的是 +/- 仅在动画结束后更改。

编辑为多个日历日的 div 添加了 div id 和图像 id 的参数。否则，图像 id 可以在函数内部进行硬编码。还假设所有日历日期都使用相同的图像来表示加号和减号。

请看一下：http: //jsfiddle.net/BfWUQ/3/

div 布局很跳跃，但我想你已经弄清楚了布局。

toggleDisplayWait('eventdetails', 'icon', 800);
// hidden div id, +/- image id, animation length in milliseconds

function toggleDisplayWait(divId, imgId, durationmSec) {
    if(!$(divId).visible()) {
        move = Effect.BlindDown;
        newImage = "http://placehold.it/100/100";
    }
    else {
        move = Effect.BlindUp;
        newImage = "http://placekitten.com/100/100";  
    }        
    move(divId, {duration: durationmSec / 1000.0 });
    setTimeout(function() { $(imgId).src = newImage; }, durationmSec)
}

编辑 2

改变

onclick="toggleDisplayWait("eventdetails<?php echo $event_count;?>", 
"icon", 800); return false;"

至

onclick="toggleDisplayWait('eventdetails<?php echo $event_count;?>', 
'icon', 800); return false;"
于 2012-04-29T01:00:47.510 回答