隐藏/显示文字字符串的元素不断返回第一个值

问题描述

我正在开发一个用户可以发表评论的应用程序。我正在尝试从字符串文字中隐藏/选择一个选定的div。

选定的div提供了用于编辑或删除用户评论的选项。

当我试图通过单击按钮隐藏元素时，我最终隐藏了第一个注释的第一个div元素，而不是所选的：

下面是一张图片来说明我的意思： enter image description here

代码： 字符串文字

          data.forEach(function(user) {
                    Messages += `       
                 <div class="output" data-id=${user.id}>
                    <h6 class="username">${user.username}</h6>
                    <h6 class="date"> ${user.date}
                    <a href="#"><i class="fas fa-ellipsis-v icon" id="icon" data-id=${user.id} ></i></a>
                    <a href="#"><div class="options" id="options" data-id=${user.id}></a>
                        <a href="#"><button id="edit" data-id=${user.id}><i class="fas fa-pencil-alt editIcon"></i> </button> </a>
                        <a href="#"><button id="delete" data-id=${user.id}><i class="fas fa-trash deleteIcon"></i> </button> </a>
                        </div>
                    </h6>
                    <p class="comments">${user.comments}</p>
                 </div>

下面是我用来尝试执行所需输出的隐藏/显示功能。

function outputEvents(e) {
    output.addEventListener('click',function(e) {
        hideShow(e);
        const id = e.target.dataset.id;
        if (e.target.id === "delete") {
            fetch('http://localhost:5502/delete/' + id,{
                method: 'DELETE'
            }).then(function(response) {
                response.json()
                console.log(response)
            }).then(function(data) {
                console.log(data);
            }).catch(function(error) {
                console.log(error);
            })
        }
    })
}

function hideShow(e) {
    const options = document.getElementById("options").style.visibility = ('hidden');

    for (var x = 0; x < options.length; x++) {
        if (e.target.id === "icon") {
            options.style.visibility = ('hidden');
            console.log(id + " is hidden");
            options++;

问题出在哪里：

    for (var x = 0; x < options.length; x++) {
        if (e.target.id === "icon") {
            options.style.visibility = ('hidden');
            console.log(id + " is hidden");
            options++;

感谢您的帮助。预先感谢。

解决方法

首先，此行const options = document.getElementById("options").style.visibility = ('hidden');产生options == "hidden"，我认为这不是您想要的。在下面的几行中，您有options.style.visibility = ('hidden');。如果options是字符串类型，则此方法将无效。

第二，似乎对于使用第一个函数创建的每个DOM片段，它都会创建一个内部div-> <div class="options" id="options" data-id=${user.id}/>。这就是问题所在，因为元素ID在整个文档DOM树中是唯一的。