如何通过具有相同类名的每个博客 post 上的按钮分别切换博客 post 上的主题标签（vanilla js）

Question

我在每个博客 post 下都有一个 div/button-text 来切换其下填充的 tags/categories 的显示。我对 JS 的理解非常有限。这两个 js 是我所拥有的，但都给出了相同的结果：单击任何博客 post 上的任何切换按钮仅显示第一个博客 post 的标签。（顺便说一句，这是在 Tumblr 上）

//------ first option
var toggleTags = document.querySelectorAll(".toggle-tags");

for (var i = 0; i < toggleTags.length; i++) {
    toggleTags[i].addEventListener("click", showTags);
}
function showTags(e) {
    for (var i = 0; i < toggleTags.length; i++) {
        var activateTags = document.querySelector(".tags");
        activateTags.classList.toggle("tags-active");
    }
}

//------ or this one
const tagButtons = document.querySelectorAll(".toggle-tags");
for (const button of tagButtons) {
    button.addEventListener("click", function () {
        const activateTags = document.querySelector(".tags");
        activateTags.classList.toggle("tags-active");
    });
}

鉴于我缺乏知识，我无法在这里找到我可以自己应用的答案，所以我做空了，我完全不知道如何自己解决这个问题。 .tags 设置为 display:none;，.tags-active 设置为 display:block!important;

这是每个博客的结构 post 如果有用的话：

<article class="post">
    <div class="post-content text">
        post body
    </div>
    <div class="info">
        <div class="info-content">
            <div class="right">
                <div class="toggle-tags">toggle tags</div>
            </div>
        </div>
        <div class="tags">
            <a href="#">text</a>
            <a href="#">quotes</a>
        </div>
    </div>
</article>

Answer 1

您的代码中的问题是 const activateTags = document.querySelector(".tags"); 将 select 第一个元素 class .tags。所以你只在那个上切换 class 。您需要像处理按钮一样相应地遍历它们。检查代码段。

const tagButtons = document.querySelectorAll(".toggle-tags");
const activateTags = document.querySelectorAll(".tags");
tagButtons.forEach((button, index) => {
  button.addEventListener("click", () => {
    activateTags[index].classList.toggle("tags-active");
  });
});

.tags{
  display:none
}

.tags-active{
  display:block!important;
}

<article class="post">
  <div class="post-content text">
    post 1
  </div>
  <div class="info">
    <div class="info-content">
      <div class="right">
        <div class="toggle-tags">toggle tags</div>
      </div>
    </div>
    <div class="tags">
      <a href="#">text</a>
      <a href="#">quotes</a>
    </div>
  </div>
</article>
<article class="post">
  <div class="post-content text">
    post 2
  </div>
  <div class="info">
    <div class="info-content">
      <div class="right">
        <div class="toggle-tags">toggle tags</div>
      </div>
    </div>
    <div class="tags">
      <a href="#">text</a>
      <a href="#">quotes</a>
    </div>
  </div>
</article>
<article class="post">
  <div class="post-content text">
    post 3
  </div>
  <div class="info">
    <div class="info-content">
      <div class="right">
        <div class="toggle-tags">toggle tags</div>
      </div>
    </div>
    <div class="tags">
      <a href="#">text</a>
      <a href="#">quotes</a>
    </div>
  </div>
</article>

我 select 使用 querySelectorAll 所有 activetags 并使用 index 选择合适的点击按钮。

如何通过具有相同类名的每个博客 post 上的按钮分别切换博客 post 上的主题标签（vanilla js）

How to toggle hashtags on blog posts individually by button on each blog post with same classname (vanilla js)

javascript

html

tumblr