生成多个数据'；可见'；或'；隐藏的'；使用CSS和Javascript

我需要你的支持来选择逻辑。我的脚本从数据库中抽出几行并显示在屏幕上。我想给每个数据一个反馈表。这些反馈表必须隐藏，并在点击文本时可见（如回复）-请参考图片

我尝试了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>

函数hideElement（）
{
document.getElementById（“目标”）.style.display=“无”；
}
函数showElement（）
{
document.getElementById（“target”）.style.display=“block”；
}
//从数据库中获取的数据-1在这里
//这里是数据1的反馈表
//从数据库中获取的数据-2在这里
//这里是数据2的反馈表

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

---

我可以使用什么逻辑来生成分配给每个记录的动态ID，并使java sript为此运行。有没有其他更好的逻辑来实现这一点？（我肯定有）

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

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

//将单击处理程序绑定到文档
文档.添加的列表器（“单击”，函数（e）{
//测试实际单击的项目是否具有“reply”类
if（e.target.className.match（/\breply\b/））{
e、 预防默认值（）；
//找到相关的目标范围
var target=e.target.parentNode.querySelector（“.target”）；
//更新其可见性
target.style.display=target.style.display==“无”？“块”：“无”；
}
});

这里是数据1的反馈表
这里是数据2的反馈表

第一步：扔掉那些ID

加成


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

JavaScript
如果你一次只想打开一个隐藏的东西，你可以先把所有的东西都隐藏起来——这有点刺耳，但很常见

但是。。。有一种更好的方法可以做到这一点，即向整个项目添加一个活动类。这使您可以在其中设置样式，通常只会为您提供更大的工作范围。下面是一个例子。：）它使用.closest-并将事件传递到click处理程序以阻止外部单击操作冒泡：
id
必须是唯一的
document.getElementById（“target”）
将只选择一个元素，在本例中，它将使用该
id
找到第一个元素。您需要使用
类
并将它们命名为
target1
和
target2
或其他名称。在HTML中，您有两个具有相同
id
的项，我所说的唯一是指只有一个元素可以具有该
id
。您需要使用不同的
id
，或者可以将它们放入
类中。我可以为每个数据创建唯一的id，但是我应该如何从Java脚本中指向这些id？我应该为每个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>

.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

$('.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();
});