1

噢噢噢噢噢我的img标签去哪儿了？

我有以下 HTML。我正在为 searchTopPanel div 使用 OnClick 来切换 searchPopDown 可见性。作为其中的一部分，我想动态更改 img 的 src - 以指示折叠/展开。这是HTML：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #searchTopPanel
        {
            background-color: rgb(155,154,211);
        }
    </style>
    <script type="text/javascript">
        function toggleSearch() {
            var style = document.getElementById("searchPopDown").style;
            var img = document.getElementById("xxxx");

            style.display = (style.display != "none") ? "none" : "block";
            img.src = (img.src != "images/expand.png") ? "images/expand.png" : "images/collapse.png";
        }
    </script>
</head>
<body>
    <div id="mainSearch">
        <div id="searchTopPanel" onclick="toggleSearch()" style="cursor:pointer">
            <span>Advanced Search</span>
            <img id="xxxx" src="images/expand.png" alt="" />
        </div>
        <div id="searchPopDown" style="display:none">
            <span>Search Options</span>
            <div id="searchOptions">
                <table>
                <tr><td>Summary</td><td>
                    <select id="Select1">
                        <option>Contains</option>
                        <option>Does not contain</option>
                        <option>Equal to</option>
                        <option>Not equal to</option>
                    </select></td><td>
                        <input id="Text1" type="text" /></td></tr>
                </table>                
            </div>
            <input id="search" type="submit" value="Search" />
        </div>
    </div>
</body>
</html>

我已将我的 img xxxx 命名为。我已经尝试了各种方法来找到它。
我正在使用 IE9 从 VS2010 运行它。我有能够调试 javascript 的优势（dis），当我调用 var img = document.getElementById("xxxx"); 时，它会显示 xxxx 为 null；.

只是希望我今天早上很愚蠢，错过了一些明显的事情。

有什么想法吗？

谢谢，

安德斯

4

3 回答 3

2

我整理了一个JS Fiddle 来证明你的 JavaScript 可以工作。

考虑到这一点，我建议您的图像路径不正确。

也许：

images/expand.png

应该：

/images/expand.png

或者图像位置/名称可能是错误的。

于 2012-08-15T10:56:30.263 回答
1

img.src 扩展为完整的 url。试试这个：

    function toggleSearch() {
        var style = document.getElementById("searchPopDown").style;
        var img = document.getElementById("xxxx");

        style.display = (style.display != "none") ? "none" : "block";
        img.expanded = !img.expanded || false;
        img.src = (img.expanded ? "images/expand.png" : "images/collapse.png");
    }
于 2012-08-15T10:57:24.380 回答
1

src 属性的值是完整路径而不是相对路径，即使您将其设置为相对路径。所以用这种方式改变它：

function toggleSearch() {
    var style = document.getElementById("searchPopDown").style;
    var img = document.getElementById("xxxx");
    //console.log(img.src); /* will show you the full path to image source */
    style.display = (style.display != "none") ? "none" : "block";
    img.src = (img.src.indexOf("images/expand.png") < 0 )
        ? "images/expand.png"
        : "images/collapse.png";
}

另一种解决方案是：

style.display = (style.display != "none") ? "none" : "block";
// Sure it's better to initialize this variable once - 
// somewhere outside the click handler:
var state = {
    'none': 'images/expand.png',
    'block': 'images/collapse.png'
}
img.src = state[style.display];
于 2012-08-15T11:03:44.247 回答