Question

我最近得到了这个简单的脚本来显示/隐藏html页面的几个部分。我用它来显示/隐藏div的内容，点击小的“+”和“ - ”：

    function toggle1() {
    var ele = document.getElementById("toggleText1");
    var text = document.getElementById("displayText1");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "+";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "-";
    }
}

同时：

<a href="javascript:toggle1();" class="txt_side_table_cmd" id="displayText1><img src="imgs/up.gif" /></a>
<div id="toggleText1" style="display: block">Content here</div>

代码工作正常，但我正在尝试将“+”和“ - ”文本链接更改为图像链接。我对Javascript知之甚少，并尝试了各种修改，使其最糟糕。这个原始脚本位于一个extrenal .js文件中。

有关如何更改文本链接到图像链接的任何想法吗？

非常感谢

Answer 1

您的ID值未正确关闭。因为document.getElementById("displayText1")未定义。所以试试这个

<a href="javascript:toggle1();" class="txt_side_table_cmd" id="displayText1">

代替你的

<a href="javascript:toggle1();" class="txt_side_table_cmd" id="displayText1>

希望这会有所帮助......

Answer 2

如果我理解正确，你可以提前制作你的图片链接，然后将它们附加到之前有'+'和' - '的元素：

var showControlImage = new Image(),
    hideControlImage = new Image();

showControlImage.src = "path/to/showImage.png";
hideControlImage.src = "path/to/hideImage.png";

// Then just use your toggle function with minor changes:
function toggle1() {
    var ele = document.getElementById("toggleText1");
    var text = document.getElementById("displayText1");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "";
        text.appendChild = showControlImage;
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "";
        text.appendChild = hideControlImage;
    }
}

此外，您应该按照Chandan's suggestion清理代码。

将text.innerHTML修改为show / hide脚本中的图像

2 个答案: