Tengo un archivo html como este:
<ul class="slider-section__toggle-ctas"> <li class="slider-section__toggle-cta active"><span>red</span></li> <li class="slider-section__toggle-cta"><span>green</span></li> <li class="slider-section__toggle-cta"><span>blue</span></li> </ul>y js así:
const imagesSlider = () => { let nextBtn = ""; if ($(".slider-section__toggle-cta").text().length !== 0) { nextBtn = $(".active").next(); } if ($(".slider-section__toggle-cta").text().length === 0){ nextBtn = $(".slider-section__toggle-cta:first"); } console.log($(".active").text().length) $('.active').removeClass('active'); nextBtn.addClass("active"); } setInterval(imagesSlider, 3000);hay una condición adicional de acuerdo con ese console.log() que incluí en el código, y no sé cómo solucionarlo, así que básicamente cuando la longitud es 3 muestra el verde, cuando la longitud es 5 muestra azul y cuando la longitud es 4 no muestra nada (ese es el problema), quiero volver al primer li con el texto "rojo" aquí,
El problema es que está comprobando el tamaño del texto .slider-section__toggle-cta que siempre no está vacío en la siguiente declaración if .
if ($(".slider-section__toggle-cta").text().length === 0)
Úselo de esta manera:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="slider-section__toggle-ctas"> <li class="slider-section__toggle-cta active"><span>red</span></li> <li class="slider-section__toggle-cta"><span>green</span></li> <li class="slider-section__toggle-cta"><span>blue</span></li> </ul> <script type="text/javascript"> const imagesSlider = () => { let nextBtn = ""; if ($(".active").text().length !== 0) { nextBtn = $(".active").next(); } if ($(".active").next().text().length === 0) { nextBtn = $(".slider-section__toggle-cta:first"); } console.log($(".active").text().length) $('.active').removeClass('active'); nextBtn.addClass("active"); } setInterval(imagesSlider, 3000); </script>Mira esta demostración
lo arreglé usando
if ($(".active").next().text().length !== 0) { nextBtn = $(".active").next(); } if ($(".active").next().text().length === 0) { nextBtn = $(".slider-section__toggle-cta:first"); }