How to display div with same ID and OnClick function - Javascript, HTML and CSS

Question

我對 Javascript 還很陌生，我遇到了一個我還無法弄清楚的問題，所以我會盡可能地解釋它。

我有 2 個 div，其中包含具有相同 ID、OnClick 的回復鏈接。 唯一的區別是我認為可以用來區分兩者的數據屬性。 有 2 個回復 div 的樣式設置為隱藏。 目的是一旦點擊回復鏈接，正確的 div 將顯示在其下方。

問題是，當您單擊兩個回復鏈接中的任何一個時，它只會打開第一個父 div 下方的第一個回復 div。 我將創建一個小示例以更好地理解：

 // Opens reply div and retrieves data-attribute (reply_id) to insert into MYSQL database function replyLink(element) { document.getElementById('reply').style.display = "block"; } // Close div link, displays after opening reply box function closeLink() { document.getElementById('reply').style.display = "none"; }

 #comment{ border: 1px solid #333333; width: 500px; height: 85px; padding: 5px; margin: 10px 10px 15px 10px; } #comment #content{ border: none; padding: 15px; font-size: 12px; } #comment #link{ border: none; padding: 5px; margin-top: 5px; } #comment #link a{ border: none; text-decoration: none; font-size: 12px; color: blue; } #comment #link a:hover{ border: none; text-decoration: underline; font-size: 12px; color: blue; } #reply{ border: 1px solid red; padding: 15px; margin: 0px 0px 10px 45px; width: 400px; }

 <div id="comment"> <div id="content"> Content #1 </div> <div id="link"> <a href='javascript:void(0);' onclick="replyLink()" data-test='1'>Reply</a> </div> </div> <div id="reply" style="display: none;"> reply container 1 <a href='javascript:void(0);' onclick='closeLink()' />[Close]</a> </div> <div id="comment"> <div id="content"> Content #2 </div> <div id="link"> <a href='javascript:void(0);' onclick="replyLink()" data-test='2'>Reply</a> </div> </div> <div id="reply" style="display: none;"> reply container 2 <a href='javascript:void(0);' onclick='closeLink()' />[Close]</a> </div>

java 天才能否幫助我。

Answer 1

您可以使用樣式類和帶有索引的 ID 來識別唯一的 div 框。 這是工作示例

 function replyLink(index) { document.getElementById('reply_' + index).style.display = "block"; } // Close div link, displays after opening reply box function closeLink(index) { document.getElementById('reply_' + index).style.display = "none"; }

 .comment { border: 1px solid #333333; width: 500px; height: 85px; padding: 5px; margin: 10px 10px 15px 10px; }.comment.content { border: none; padding: 15px; font-size: 12px; }.comment.link { border: none; padding: 5px; margin-top: 5px; }.comment.link a { border: none; text-decoration: none; font-size: 12px; color: blue; }.comment.link a:hover { border: none; text-decoration: underline; font-size: 12px; color: blue; }.reply { border: 1px solid red; padding: 15px; margin: 0px 0px 10px 45px; width: 400px; }

 <div class="comment"> <div class="content"> Content #1 </div> <div class="link"> <a href='javascript:void(0);' onclick="replyLink(0)" data-test='1'>Reply</a> </div> </div> <div class="reply" id="reply_0" style="display: none;"> reply container 1 <a href='javascript:void(0);' onclick='closeLink(0)'>[Close]</a> </div> <div class="comment"> <div class="content"> Content #2 </div> <div class="link"> <a href='javascript:void(0);' onclick="replyLink(1)" data-test='2'>Reply</a> </div> </div> <div class="reply" id="reply_1" style="display: none;"> reply container 2 <a href='javascript:void(0);' onclick='closeLink(1)'>[Close]</a> </div>

Answer 2

雖然在第一次使用 JavaScript 和 HTML 時使用 id 很簡單，但不鼓勵將其用作反模式。 ID 會產生脆弱的代碼（正如您在此處看到的那樣）並且不能很好地擴展。 相反，根本不要使用 id，而是使用類或對元素的相對引用，例如 this、.closest()、nextElementSibling、parentNode 等。

此外，使用超鏈接作為“鈎子”在單擊事件時啟動某些代碼在語義上是不正確的。 超鏈接用於導航，使用屏幕閱讀器的人將難以導航您的頁面。 幾乎每個可見的 HTML 元素都支持單擊事件，因此只需將單擊處理程序直接附加到元素，而不是用超鏈接包裝元素。

最后，不需要單獨的顯示和隱藏功能。 只需根據單擊的內容添加或刪除“隱藏的” class 即可。

您可以在我的回答中看到 HTML 和 JavaScript 沒有id的清潔程度。

請參閱下面的內聯評論。

 // Set up a single event handler for any clicks to any reply or Close document.addEventListener("click", function(event){ // Check to see if the click originated at a Reply element if(event.target.classList.contains("reply")){ // Find the closest ".comment" ancestor of the clicked reply // element and then get the next element sibling to that and // unhide it. event.target.closest(".comment").nextElementSibling.classList.remove("hidden"); } else if(event.target.classList.contains("replyContainer")){ event.target.classList.add("hidden"); } });

 .hidden { display:none; }.comment{ border: 1px solid #333333; width: 500px; height: 85px; padding: 5px; margin: 10px 10px 15px 10px; }.comment.reply{ padding: 5px; margin-top: 5px; }.replyContainer{ border: 1px solid red; padding: 15px; margin: 0px 0px 10px 45px; width: 400px; }

 <div class="comment"> <div class="content">Content #1</div> <div class="reply">Reply</div> </div> <div class="hidden replyContainer">reply container 1[Close]</div> <div class="comment"> <div class="content">Content #2</div> <div class="reply">Reply</div> </div> <div class="hidden replyContainer">reply container 2[Close]</div> <div class="comment"> <div class="content">Content #3</div> <div class="reply">Reply</div> </div> <div class="hidden replyContainer">reply container 3[Close]</div>

Answer 3

您可以使用 DOM 結構來發揮自己的優勢。 通常，您不會希望過深地依賴它。 對於切換div完全沒問題。 通過使用被點擊的元素，我們可以尋找最近的共同祖先。 這樣我們就可以找到相關的div 。

 function replyLink(elem) { elem.closest("article").querySelector("#reply").style.display = "block"; } function closeLink(elem) { elem.closest("article").querySelector("#reply").style.display = "none"; } // just for demo: document.body.innerHTML = document.body.innerHTML + document.body.innerHTML document.body.innerHTML = document.body.innerHTML + document.body.innerHTML

 <article> <div id="comment"> <div id="content"> Content #N </div> <div id="link"> <a href='javascript:void(0);' onclick="replyLink(this)" data-test='1'>Reply</a> </div> </div> <div id="reply" style="display: none;"> reply container 1 <a href='javascript:void(0);' onclick='closeLink(this)'>[Close]</a> </div> </article>