Tengo 5 oraciones y quiero que después de 3 segundos se coloree el fondo de la siguiente oración
HTML:
<div class="text-slider"> <div class="text-wrap"> <p class="text text-1 active"> text 1</p> <p class="text text-2">text 2</p> <p class=" text text-3">text 3</p> <p class="text text-4">text 4</p> <p class="text text-5"> text 5 </p> </div> </div>CSS:
.text-wrap p.active { background-color: #edf0f2; }JS
let count = 1 setInterval(()=>{ document.querySelector(`.text-${count}`).classList.add('active') count++ if(count>5){ count =1 } }, 3000)Quiero eliminar la clase activa del elemento anterior, así que intento
document.querySelector(`.text-${count -1}`).classList.remove('active')después de count++ pero no funciona
En lugar de encontrar un elemento con relación al conteo, puede piratearlo un poco, y en su selector, busque el elemento activo y elimine esa clase activa de la siguiente manera.
let count = 1; setInterval(() => { // Here you remove active class from `p` tag which had it document.querySelector(".text.active").classList.remove("active"); // <- HERE document.querySelector(`.text-${count}`).classList.add("active"); count++; if (count > 5) { count = 1; } }, 3000); let count = 1; setInterval(() => { document.querySelector(".text.active").classList.remove("active"); document.querySelector(`.text-${count}`).classList.add("active"); count++; if (count > 5) { count = 1; } }, 1000); .text-wrap p.active { background-color: #edf0f2; } <div class="text-slider"> <div class="text-wrap"> <p class="text text-1 active">text 1</p> <p class="text text-2">text 2</p> <p class="text text-3">text 3</p> <p class="text text-4">text 4</p> <p class="text text-5">text 5</p> </div> </div>Refactoricé un poco el archivo JavaScript:
let count = 1 setInterval(() => { if (count > 5) { document.querySelector(`.text-${count- 1}`).classList.remove('active') count = 1 } else { document.querySelector(`.text-${count}`).classList.add('active') if (count > 1) document.querySelector(`.text-${count-1}`).classList.remove('active') count++ } }, 1000) .text-wrap p.active { background-color: #edf0f2; } <div class="text-slider"> <div class="text-wrap"> <p class="text text-1 active"> text 1</p> <p class="text text-2">text 2</p> <p class=" text text-3">text 3</p> <p class="text text-4">text 4</p> <p class="text text-5"> text 5 </p> </div> </div>Debe usar remove en lugar de add para eliminar la clase, y trato de ajustar un poco su código js.
let count = 1; setInterval((storage) => { const clsName = 'active'; const current = `.text-${count}`; const previous = storage.shift(); document.querySelector(previous)?.classList.remove(clsName); document.querySelector(current).classList.add(clsName); storage.push(current); count = count % 5; count++; }, 1000, []) .text-wrap p.active { background-color: #edf0f2; } <div class="text-slider"> <div class="text-wrap"> <p class="text text-1 active"> text 1</p> <p class="text text-2">text 2</p> <p class="text text-3">text 3</p> <p class="text text-4">text 4</p> <p class="text text-5"> text 5 </p> </div> </div>