使用 CSS 和 Javascript 使多个数据“可见”或“隐藏”

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 sript 为其运行。有没有其他更好的逻辑来做到这一点？ （我确定有）

Answer 1

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

对于这种类型的函数，您根本不需要 ID，您可以使用类和 DOM 导航从单击的项目到相关跨度，使用单个委托事件处理程序，如下所示：

// 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 中放了一些 cmets 来解释它在做什么，但重要的是这一行：

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

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

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

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

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

Answer 2

http://codepen.io/sheriffderek/pen/BzmAwg

第 1 步：丢弃这些 ID

标记

<ul class="item-list">
    <li>
        <p>default stuff</p>
        <div class="hidden-thing">
            hidden stuff
        </div>
    </li>
    <li>
        <p>default stuff</p>
        <div class="hidden-thing">
            hidden stuff
        </div>
    </li>
    <li>
        <p>default stuff</p>
        <div class="hidden-thing">
            hidden stuff
        </div>
    </li>
</ul>

第 2 步：隐藏 CSS 中的隐藏内容而不是内联

样式

（这是手写笔语法..但相同点）

.item-list
    list-style: none
    margin: 0
    padding: 0
    li
        background: gray
        padding: .5rem
        margin-bottom: 1rem
        cursor: pointer
        .hidden-thing
            display: none // hide it

第 3 步：使用 jquery 或 vanilla JavaScript 获取您想要单击的内容 - 附加事件处理程序 - 使用 this 记录事件发生在哪个元素上 - 使用该元素...遍历 DOM 并找到您想要的内容- 然后使用 show 方法，设置 display: block... 或 fadeIn() 或 animate() 或任何你喜欢的。

JavaScript

$('.item-list li').on('click', function() {
    $(this).find('.hidden-thing').show();
});

// or... 
$('.item-list li').on('click', function() {
    $('.item-list li').find('.hidden-thing').hide();
    $(this).find('.hidden-thing').show();
});

如果您希望一次只打开一个隐藏的东西，您可以每次先隐藏所有项目 - 这有点笨拙，但很常见。

但是...有一种更好的方法可以做到这一点，您可以在整个项目中添加一个活动类。这使您可以在其中设置样式，并且通常为您提供更大的使用范围。这是一个例子。 :) 它使用 .closest - 并将事件传递给点击处理程序以阻止外部点击操作冒泡：http://codepen.io/sheriffderek/pen/oLoqEy