javascript - 使用 CSS 和 Javascript 制作多个数据 'visible' 或 'hidden'

Question

我需要您的支持来选择逻辑。我的脚本从数据库中提取几行并显示在屏幕上。我想为每个数据提供反馈表。这些反馈表必须隐藏，并应在单击文本时可见(如对此回复)- 请引用图片。

我已经尝试在 java 脚本和 CSS 的帮助下

<script>
function hideElement()
{
document.getElementById("target").style.display="none";
}
function showElement()
{
document.getElementById("target").style.display="block";
}
</script>


// Data-1 fetched from DB goes here
<a href='#target'>Reply to this post</a>
<span id='target' style='display:none'>
// Feedback form for Data 1 here
</span>

// Data-2 fetched from DB goes here
<a href='#target'>Reply to this post</a>
<span id='target' style='display:none'>
// Feedback form for Data 2 here
</span>

但它仅适用于第一条记录，- Javascript 找到名称为“target”的第一个对象并设置显示属性“none”或“block”

我可以使用什么逻辑来生成分配给每条记录的动态 ID 并使 java 脚本为此运行。还有其他更好的逻辑可以做到这一点吗？ (我确定有)

Answer 1

元素 ID 必须是唯一的，但任何时候您发现自己为重复元素生成唯一 ID 时，可能有一种更简单、更通用的方法来实现您正在做的任何事情。

对于这种类型的功能，您根本不需要 ID，您可以使用类和 DOM 导航从单击的元素转到相关的范围，使用单个委托(delegate)事件处理程序如下:

// bind click handler to the document
document.addEventListener("click", function(e) {
  // test if the actual clicked item has the class "reply"
  if (e.target.className.match(/\breply\b/)) {
    e.preventDefault();
    // find the related target span
    var target = e.target.parentNode.querySelector(".target");
    // update its visibility
    target.style.display = target.style.display === "none" ? "block" : "none";
  }
});

<div>  <!-- note added wrapper div -->
  <a href='#target' class="reply">Reply to this post</a>
  <span class='target' style='display:none'>
      Feedback form for Data 1 here
  </span>
</div>
<div>  <!-- note added wrapper div -->
  <a href='#target' class="reply">Reply to this post</a>
  <span class='target' style='display:none'>
      Feedback form for Data 2 here
  </span>
</div>

我在上面的 JS 中添加了一些注释来解释它在做什么，但重要的是这一行:

var target = e.target.parentNode.querySelector(".target");

在事件监听器中，e 参数是 event 对象，它包含有关正在处理的事件的各种信息。 e.target 告诉点击了哪个元素。已经测试了该元素的类以查看它是否是“回复” anchor 之一，然后我们使用 .parentNode 属性获取对我添加到标记中的包装器 div 的引用，然后从.querySelector(".target") 找到具有类 target 的 div 的后代。

如您所见，我已经修改了您的 html 以支持上述内容，如下所示:

1. 将跨度 ID 更改为类
2. 给定 anchor class="reply"
3. 为每个组添加了包装器 div 元素，使 DOM 导航简单可靠。您可以使用 e.target.nextSibling 从 anchor 导航到跨度，除非您必须添加额外的代码才能跳过任何文本节点。我发现包装器元素更易于使用。当然，如果您的元素已经在某种包装器中用于其他目的，那么您可以只使用现有的包装器。

注意:最好删除内联样式，并通过添加和删除类而不是直接更新它们的样式来显示和隐藏跨度，但这并不是这里真正的主要问题，所以我将把它留作读者练习。