Tengo un div/botón debajo de cada texto de publicación de blog para alternar la visualización de las etiquetas/categorías en las que se rellena. Mi comprensión de JS es muy limitada. Estas dos piezas de js son lo que tengo, pero ambas dan el mismo resultado: hacer clic en cualquiera de los botones de alternar en cualquier publicación de blog solo muestra las etiquetas de las primeras publicaciones de blog. (esto está en Tumblr por cierto)
//------ 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"); }); } Dada mi falta de conocimiento, no pude encontrar una respuesta aquí que yo mismo pudiera aplicar, así que me estoy quedando corto y no tengo ni idea de cómo arreglar esto yo mismo. .tags está configurado para display:none; y .tags-active configurado para display:block!important;
Esta es la estructura de cada publicación del blog en caso de que sirva de algo:
<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>El problema en su código es que const activateTags = document.querySelector(".tags"); seleccionará el primer elemento con la clase .tags . Así que estás alternando la clase solo en esa. Debe iterar a través de ellos en consecuencia como lo hace con sus botones. Revisa el fragmento.
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> Selecciono todas las etiquetas querySelectorAll activetags elijo la apropiada para el botón en el que se hizo clic usando index .