Question

我不能在这个项目上使用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";
            }
    }

我无法使用此代码。
有什么建议可以解决这个问题吗？

Answer 1

在这里你需要传递两个对你的toggle函数的引用，一个引用到目标，一个引用到它自己：

<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";
            }
    }

Answer 2

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

Answer 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>

Answer 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>

Answer 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>

无法获得javascript“show hide”div代码

5 个答案: