Estoy tratando de hacer un control deslizante. La mayor parte está funcionando hasta aquí, pero no estoy avanzando, ya que quiero encontrar el índice del elemento del que eliminé la clase por última vez (antes del clic)
Entonces, cuando hago clic en un punto, el punto en el que se hizo clic debe estar habilitado y obtener la clase activa y la clase en el punto activo anterior debe eliminarse.
navDots.addEventListener('click', e => { // make only dot's clickable const targetDot = e.target.closest('.dots'); // disable NavDots for clicks if(!targetDot)return; //Find the index of the clicked btn const dotIndex = Array.from(targetDot.parentNode.children).indexOf(targetDot); console.log(dotIndex); // Add the active class tot the dot navDots.children[dotIndex].classList.add('active'); //HOW TO REMOVE PREVIOUS DOT ACTIVE style? //show image with dotIndex showImages(dotIndex); });Gracias por ayudar,
r, y.
La forma más eficiente es almacenar el elemento activo en una variable:
let activeElement = null; navDots.addEventListener('click', e => { // make only dot's clickable const targetDot = e.target.closest('.dots'); // disable NavDots for clicks if(!targetDot)return; //Find the index of the clicked btn const dotIndex = Array.from(targetDot.parentNode.children).indexOf(targetDot); console.log(dotIndex); // remove previous active class activeElement && activeElement.classList.remove("active"); // save new active element activeElement = navDots.children[dotIndex]; // Add the active class tot the dot activeElement.classList.add('active'); //HOW TO REMOVE PREVIOUS DOT ACTIVE style? //show image with dotIndex showImages(dotIndex); });