Question

我目前正在使用toggle 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”部分中放置任何内容时，它会将其放入其自己的命名空间中，从而阻止访问该块之外的那些函数名称（因此您对toggle1的调用会导致未定义的函数错误）。

通过将这些函数直接定义为window.属性，您可以看到这一点。然后您的代码按预期工作。见http://jsfiddle.net/sQnd9/7/

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

另外，你可能不应该这样做。您应该在javascript块中附加事件处理程序。

Answer 2

你错过了第二个

中img src属性的引号

您还引用了两个示例中的第一个函数，因此第二个函数永远不会被调用...尝试更改：

<div><a id="imageDivLink2" href="javascript:toggle1('contentDivImg2', 'imageDivLink2');"><img src="images/Plus_Circle.png";/></a>Example2</div>

到

<div><a id="imageDivLink2" href="javascript:toggle2('contentDivImg2', 'imageDivLink2');"><img src="images/arrow_open.png" /></a>Example2</div>

另外，我不知道为什么你的img标签中有分号，它们不应该在那里。

Jquery：通过触发和图像点击机制切换div

2 个答案: