Básicamente, hice un carrusel usando Flickity y dentro de cada diapositiva, hay una imagen y un botón que, cuando se hace clic, revela texto.

Lo que estoy tratando de lograr es cuando el usuario hace clic para ir al siguiente elemento en el carrusel, el texto vuelve a mostrar ninguno hasta que se vuelve a hacer clic en el botón.

Mi botón de alternar -

 function toggleText(){ var elms = document.getElementsByClassName("figure-caption-test"); var select = document.getElementsByClassName(".carousel-cell-test.is-selected"); Array.from(elms).forEach((x) => { if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }) }

mi carrusel -

 jQuery(function ($) { var parent = $(".carousel-test"); var divs = $(".carousel-cell-test").not(".carousel-cell-test.is-selected"); while (divs.length) { parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]); } });

Mi HTML-

 <div class="carousel-test" data-flickity> {% for image in images %} <div class="carousel-cell-test"> {# <img src="wp-content/themes/cc/Components/SliderImages/screenshot.png"> #} <figure class="figure"> {# <img src="wp-content/themes/cc/Components/SliderImages/screenshot.png"> #} <img class="figure-image lazyload" data-flickity-lazyload="{{ image.src|resizeDynamic(0, 540) }}" srcset="{{ placeholderImage(image.aspect * 540, 540) }}" data-srcset="> {% if image.caption %} <button class="figure-button" id="figure-button" onclick="toggleText()"> REVEAL ANSWER </button> <figcaption class="figure-caption-test" id="reveal-text" style="display: none;">{{ image.caption|e }}</figcaption> {% endif %} </figure> </div> {% endfor %} </div>

Debido a que el control deslizante se crea con Flickity, gran parte del código se encuentra en la consola. Esto es lo que estoy tratando de lograr, pero no funcionará cuando lo intente implementar. Pero pensé que agregar algo como esto a mi "toggleText" solucionaría este problema.

 var button = document.getElementsByClassName("flickity-prev-next-button").onclick = function(){ document.getElementsByClassName("figure-caption-test").style.display = "none"; }

También estoy haciendo esto es ramita. Cualquier ayuda es muy apreciada.