javascript - 无法使 javascript "show hide"div 代码正常工作

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

这里您需要传递两个对切换函数的引用，一个给目标，一个给它自己:

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

(另外，对于内嵌 javascript，最好使用 onclick，而不是 href)

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

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