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

JavaScript が機能することを示すために、JS Fiddle をまとめました。

これを念頭に置いて、画像パスが正しくないことをお勧めします。

多分：

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 に答える