javascript - 使用 div 切换更改图像 onclick

Question

我正在编写一些代码，根据用户单击图像来切换信息的 div。我正在寻找的是帮助在用户单击时交换图像，然后在再次单击时交换回来。图像应更改为:https://casetest.blackboard.com/bbcswebdav/users/kas200/collapse.gif

我是 JS 编码的新手，所以如果能提供任何帮助，我将不胜感激!

<script type="text/javascript">
    function toggleMe(a){
        var e=document.getElementById(a);
        if(!e)return true;
        if(e.style.display=="none"){
            e.style.display="block";
        }
        else{
            e.style.display="none";
        }
        return true;
    }
</script>

<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" onclick="return toggleMe('para1')" value="Toggle"><br>
<div id="para1" style="display:none">
    This is my text for section 1!
</div>
<br>
<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" onclick="return toggleMe('para2')" value="Toggle"><br>
<div id="para2" style="display:none">
    This is my text for section 2!
</div>
<br>
<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" onclick="return toggleMe('para3')" value="Toggle"><br>
<span id="para3" style="display:none">
    This is my text for section 3!
</span>

Answer 1

你的想法是正确的。我为这个案例所做的是为每个图像添加一个 id，名称为 div + _img——以相同的方式获取该元素，然后更新 src:

javascript

function toggleMe(a){
    var e=document.getElementById(a);
    var i=document.getElementById(a+'_img');
    if(!e)return true;
    if(e.style.display=="none"){
        i.src="https://casetest.blackboard.com/bbcswebdav/users/kas200/collapse.gif"
        e.style.display="block"
    }
    else{
        i.src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif"
        e.style.display="none"
    }
    return true;
}

html

<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" onclick="return toggleMe('para1')" value="Toggle" id="para1_img"><br>
<div id="para1" style="display:none">
This is my text for section 1!
</div>
<br>
<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" onclick="return toggleMe('para2')" value="Toggle" id="para2_img"><br>
<div id="para2" style="display:none">
This is my text for section 2!
</div>
<br>
<input type="image" src="https://casetest.blackboard.com/bbcswebdav/users/kas200/expand.gif" onclick="return toggleMe('para3')" value="Toggle" id="para3_img"><br>
<span id="para3" style="display:none">
This is my text for section 3!
</span>

这是一个工作示例:http://jsfiddle.net/8h4T7/1/