Javascript 单击时，ClassList.add（）不是对每个项目都有效

我尝试使用forEach方法在单击时使用querySelectorAll将类添加到多个相同的元素中。然而，我的问题是当我点击每一项时，我的代码就是这样工作的

项目：

• 工作-[课堂添加]（“我点击了”）
• 未工作-[未添加类]（“我单击了”）
• 工作-[课堂添加]（“我点击了”）
• 未工作-[未添加类]（“我单击了”）

这是我的密码：

JavaScript:

const options = document.querySelectorAll("#options")
    options.forEach(opt => {
        opt.addEventListener("click", (e) => {
            let settings = e.target.parentElement.nextSibling.nextSibling
            settings.classList.toggle("is-settings-visible");
    
        })
    })

<div class="blog-post-buttons">
    <button id="twitter-post-modal" class="twitter-post">Post To Twiter</button>
    <button id="linkedln-post-modal" class="linkedln-post">Post To Linkedln</button>
    <i id="options" class="fas fa-ellipsis-h"></i>
</div>
<div class="options-post">
    <ul>
        <li id="web-sharing">Web Sharing options</li>
        <li id="sign-in-accounts">Sign in social accounts</li>
        <li id="help-tutorials">Help and tutorials</li>
    </ul>
</div>

.options-post{
    visibility: hidden;
 }

.options-post.is-settings-visible{
        visibility: visible;
    }

HTML:

const options = document.querySelectorAll("#options")
    options.forEach(opt => {
        opt.addEventListener("click", (e) => {
            let settings = e.target.parentElement.nextSibling.nextSibling
            settings.classList.toggle("is-settings-visible");
    
        })
    })

<div class="blog-post-buttons">
    <button id="twitter-post-modal" class="twitter-post">Post To Twiter</button>
    <button id="linkedln-post-modal" class="linkedln-post">Post To Linkedln</button>
    <i id="options" class="fas fa-ellipsis-h"></i>
</div>
<div class="options-post">
    <ul>
        <li id="web-sharing">Web Sharing options</li>
        <li id="sign-in-accounts">Sign in social accounts</li>
        <li id="help-tutorials">Help and tutorials</li>
    </ul>
</div>

.options-post{
    visibility: hidden;
 }

.options-post.is-settings-visible{
        visibility: visible;
    }

有人能帮我吗？ js

让btn=document.querySelector（“.add”）；
const screen=document.querySelector（“.screen”）；
var计数=0；
btn.addEventListener（“单击”，（）=>{
让html=`
寄往
推特
寄往
Linkedln

web共享选项
登录社交帐户
帮助和教程

`;
让messageDiv=document.createElement（“div”）；
messageDiv.classList.add（“message”）；
messageDiv.innerHTML=html；
screen.insertAdjacentElement（“afterend”，messageDiv）；
const iconElem=document.getElementById（“选项”+count）；
iconElem.addEventListener（“单击”，（e）=>{
控制台日志（“t”）；
让设置=e.target.parentElement.nextSibling.nextSibling
设置.classList.toggle（“设置是否可见”）；
})
计数++；
})

---

也许你可以用这种方式

你能解释一下你的问题吗？你的代码可以工作。但我无法获得您想要的操作。对我来说很有用：类

是设置访问。每次单击水平省略号图标，都会打开
div.options-post
。我共享了多个保存div。当我尝试单击每个div时，我尝试实现的类只对1空1满起作用。它适用于第一个元素，而不适用于第二个元素，也适用于第三个元素。我尝试了多个
div
s，但它仍然有效。尝试使用一个
nextElementSibling
而不是两个
nextSibling
I使用函数将这些div动态发送到UI。我认为问题出在我的职能上。因为当我复制并粘贴到HTML时，它们也适用于我。嗨，Kaan，谢谢你的回答。我的问题在这里，好的，我编辑我的解决方案。问题是您多次单击添加按钮，它会将“侦听器”添加到opt elemet。正因为如此，具有偶数的opt元素不起作用。我感谢您的帮助！不客气！谢谢你的投票：）