Javascript 如何将事件侦听器添加到具有相同类的多个元素中，然后仅更改其他特定元素的CSS

我基本上是想使显示和隐藏多个文本块成为可能，它们彼此完全分离。这样，当按下其中一个按钮时，其正下方的相应引号将变为可见（display:block），但仅显示该引号

这就是我到目前为止所做的，但我现在遇到了一堵墙：

JS:

设btn=document.querySelectorAll（'btn'）；
让quote=document.querySelectorAll（'quote'）；
btn.addEventListener（“单击”，函数（）{
如果（quote.style.display==“块”）{
quote.style.display=“无”；
}否则{
quote.style.display=“block”；
}
});

HTML:

单击此处查看报价
废话

单击此处查看报价
废话

单击此处查看报价
废话

您必须为循环中的每个btn声明一个eventListener，并在侦听器内声明quote。我更改了显示检查，以确定在开始时没有显示样式引用。您还忘记了“let btn”中的一个点

let btn=document.querySelectorAll（'.btn'）；
对于（i=0；i

单击此处查看报价
废话

单击此处查看报价
废话

单击此处查看报价
诸如此类的废话我用jQuery做了如下：
使用
$（this）
单击的按钮，以及
.next（）
提供下一个元素

您可以找到下一个元素（我添加了一个检查，以确保下一个元素在运行之前具有类引号），并应用您的样式


$（'.btn'）。在（'click'，function（）上{
if（$（this）.next（）.hasClass（'quote'））{
$（'.quote'）.css（'display'，'none'）；
$（this.next（）.css（'display'，'block'）；
}
});
p{display:none；}

单击此处查看报价
废话

单击此处查看报价
废话

单击此处查看报价
诸如此类诸如此类的废话
首先，如果您想选择类，它应该是
queryselectorall（'.btn'）
和
queryselectorall（'.quote'）
（以
开头）

其次，使用
queryselectorall
，您的
btn
和
quote
变量将是节点列表（您应该将其命名为
btn
和
quotes
btw），因此您将无法向其添加事件侦听器。您应该做的是迭代抛出列表并为每个项目添加事件侦听器：

let btns = [...document.querySelectorAll('.btn');
btns.map(btn => btn.addEventListener('click', (btn, idx) => handleBtnClick(btn, idx));

然后在
handletnclick
中，您应该选择具有相应
idx
的div并使其可见，而其他div不可见：

const handleBtnClick = (btn, idx) => {
    let quotes = [...document.querySelectorAll('.quote')];
    quotes.map( (quote, quotedIdx) => {
       if (quoteIdx === idx) {
          quote.style.display = 'block';
       } else {
          quote.style.display = 'none';
       }
    }
    

此代码未经优化，请随意重构
您接受jQuery解决方案吗？还是只使用普通javascript？就个人而言，我倾向于将每个
+/code>+
对放入自己的
中，然后这样做：如果这是帮助您将其标记为已接受的答案……是的，这非常有效，正如我所希望的。谢谢bunch@Ben要接受答案，您必须单击复选标记，如中所述
let btns = [...document.querySelectorAll('.btn');
btns.map(btn => btn.addEventListener('click', (btn, idx) => handleBtnClick(btn, idx));

const handleBtnClick = (btn, idx) => {
    let quotes = [...document.querySelectorAll('.quote')];
    quotes.map( (quote, quotedIdx) => {
       if (quoteIdx === idx) {
          quote.style.display = 'block';
       } else {
          quote.style.display = 'none';
       }
    }