javascript - 通过触发和图片点击机制切换div

Question

我目前正在使用切换 div 功能。我使用图像作为切换的触发点。例如，当 div 关闭时，会出现带有“加号”符号的图像，指示用户展开，反之亦然以压缩 div。唯一的问题是我使用两组图像来扩展和压缩 div，但我只能让一组图像工作，但不能同时工作。我的示例在 jsfiddle 中效果不佳，但如果您想查看它，这里有链接:http://jsfiddle.net/sQnd9/4/

这是我的例子:

<script type="text/javascript">
function toggle1(showHideDiv, switchImgTag) {
        var ele = document.getElementById(showHideDiv);
        var imageEle = document.getElementById(switchImgTag);
        if(ele.style.display == "block") {
                ele.style.display = "none";
        imageEle.innerHTML = '<img src="images/Plus_Circle.png"/>';
        
        }
        else {
                ele.style.display = "block";
                imageEle.innerHTML = '<img src="images/Minus_Circle.png"/>';
                
        }
}
</script>

<script type="text/javascript"> 

function toggle2(showHideDiv2, switchImgTag2) { 
        var ele = document.getElementById(showHideDiv2); 
        var imageEle = document.getElementById(switchImgTag2); 
        if(ele.style.display == "block") { 
                ele.style.display = "none"; 
        imageEle.innerHTML = '<img src=images/arrow_open.png/>'; 
        } 
        else { 
                ele.style.display = "block"; 
                imageEle.innerHTML = '<img src=images/arrow_close.png/>'; 
        } 
} 
</script> 


<div><a id="imageDivLink" href="javascript:toggle1('contentDivImg', 'imageDivLink');"><img src="images/Plus_Circle.png";/></a>Example</div>  
<br />
       <div id="contentDivImg" style="display:none;">
       Example1-Content
       </div>


<div><a id="imageDivLink2" href="javascript:toggle2('contentDivImg2', 'imageDivLink2');"><img src="images/Plus_Circle.png";/></a>Example2</div>  
<br />
       <div id="contentDivImg2" style="display:none;">
       Example2-Content
       </div>

Answer 1

问题不在于你的代码(除了 @appclay 指出的错误)。问题是jsfiddle。只需查看它生成的源代码即可。当您将任何内容放入“javascript”部分时，它会将其放入自己的命名空间中，从而防止访问该 block 之外的这些函数名称(例如，对 toggle1 的调用会引发未定义的函数错误) .

您可以通过将这些函数直接定义为 window. 属性来查看其实际效果。然后您的代码将按预期工作。请参阅http://jsfiddle.net/sQnd9/7/

在您自己的代码中，您可能不会将这些函数名称封装到它们自己的作用域中，并且它将按预期工作(但请再次注意，您应该进行 @appclay 指出的更改)。

此外，您可能不应该这样做。您应该将事件处理程序附加到 javascript block 中。