Question

我正在制作活动日历，活动的“细节”在隐藏的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>

Answer 1

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

编辑为多个日历天的div添加了div id和image 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;"

PHP表单发布到SQL后没有任何操作

1 个答案: