无法使 javascript“显示隐藏”div 代码工作答案

【问题标题】：Can not get the javascript "show hide" div code to work无法使 javascript“显示隐藏”div 代码工作
【发布时间】：2011-08-09 19:55:02
【问题描述】：

我不能在这个项目上使用 jQuery（客户端策略）。

我的html代码是：

<div style="display:none" id="dvAnswer<%#Eval("num")%>" class="TextFontBold">A: <%#Eval("answer") %></div>
<a id="btn<%#Eval("num")%>" href="javascript:toggle();">show answer</a>

Javascript 代码是：

    function toggle() {
            var ele = document.getElementById("toggleText");
            var text = document.getElementById("displayText");
            if(ele.style.display == "block") {
                ele.style.display = "none";
                text.innerHTML = "show";
            }
            else {
                ele.style.display = "block";
                text.innerHTML = "hide";
            }
    }

我无法让此代码工作。
有什么解决这个问题的建议吗？

【问题讨论】：

您实际上没有名为“toggleText”或“displayText”的元素，但这正是 JavaScript 所要寻找的。或许可以向我们展示div/a 元素在被发送到浏览器后的样子（在页面呈现后查看源代码）。
您没有任何 ID 为 toggleText 或 displayText 的元素
我的 div 被动态命名为 id="dvAnswer" 调用切换函数的按钮也是如此 id="btn"

标签： javascript asp.net html show-hide

【解决方案1】：

这里你需要将两个引用传递给你的切换函数，一个给目标，一个给它自己：

<div style="display:none" id="dvAnswer<%#Eval("num")%>" class="TextFontBold">A: <%#Eval("answer") %></div>
<a id="btn<%#Eval("num")%>" href="javascript://" onclick="toggle('dvAnswer<%#Eval("num")%>',this);">show answer</a>

（另外，使用onclick，而不是href 用于内联javascript 是一种很好的做法）

然后将这些引用传递给您的函数：

function toggle(target,me) {
            var ele = document.getElementById(target);
            var text = me
            if(ele.style.display == "block") {
                ele.style.display = "none";
                text.innerHTML = "show";
            }
            else {
                ele.style.display = "block";
                text.innerHTML = "hide";
            }
    }

【讨论】：

如果您使用的是值得学习的 jQuery，您可以在两行代码中完成此操作，而无需传递任何参数。 api.jquery.com/toggle
我同意，但客户特别提到没有 Jquery。再次感谢您的帮助。

【解决方案2】：

您元素的 ID 不是 toggleText，我也没有看到 displayText 元素。

【讨论】：

【解决方案3】：

首先你的 div 没有 id="toggleText" 也没有 id="displayText"

所以你需要做的是为此创建一个小算法

function toggle(lnk) {
           var num = lnk.getAttribute('id').toString().replace('btn','');
            var ele = document.getElementById('dvAnswer'+num);
            if(ele.style.display == "block") {
                ele.style.display = "none";
                lnk.innerHTML = "show";
            }
            else {
                ele.style.display = "block";
                lnk.innerHTML = "hide";
            }
    }

你的 html 应该是这样的

<div style="display:none" id="dvAnswer<%#Eval("num")%>" class="TextFontBold">A: <%#Eval("answer") %></div>
<a id="btn<%#Eval("num")%>" onclick="toggle(this); return false;" href="#">show answer</a>

【讨论】：

【解决方案4】：

您似乎是通过错误的 ID 调用元素。在您的 HTML 中，我没有看到您的任何元素的“toggleText”或“displayText”ID。

在您的示例中，ID 看起来是动态的。也许只是在你的函数中传递对象引用：

function toggle(objRef) {
        var ele = document.getElementById(objRef);
        var text = document.getElementById("displayText");
        if(ele.style.display == "block") {
            ele.style.display = "none";
            text.innerHTML = "show";
        }
        else {
            ele.style.display = "block";
            text.innerHTML = "hide";
        }
}

和 HTML 的：

<a id="btn<%#Eval("num")%>" href="javascript:toggle("dvAnswer<%#Eval("num")%>");">show answer</a>

【讨论】：

【解决方案5】：

可能您在 html 中的 id 与 javascript 请求的不同？这个“应该”工作

<div style="display:none" id="toggleText" class="TextFontBold">A:<%#Eval("answer") %></div>
<a id="displayText" href="javascript:toggle();">show answer</a>

【讨论】：