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>