無法使 javascript “顯示隱藏” 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

在這里，您需要將兩個引用傳遞給您的切換 function，一個給目標，一個給自己：

<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是一種好習慣，而不是內聯javascript的href ）

然后將這些引用傳遞給您的 function：

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 中的 object 參考：

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>