Agrega una clase en JavaScript sin apuntar al elemento padre.
Tengo un problema con este fragmento de código:
document.querySelector('.location__list-link[data-area-id="' + areaId + '"]').parentElement.classList.add("plop");
En realidad quiero agregar la clase “plop” a “.location__list-link”, pero tengo una segunda clase detrás de ella. Esta última clase no debe ser tomada en cuenta.
El HTML es:
<div class="location__wrapper">
<div class="location__content">
<ul class="location__list">
<li class="location__list-item"><a data-area-id="1" class="location__list-link fond-bleu" href="https://www.antibes-juanlespins.com/">Antibes Juan-les-Pins</a></li>
<li class="location__list-item"><a data-area-id="22" class="location__list-link fond-vert" href="http://bezaudun.fr/">Bézaudun-les-Alpes</a></li>
<li class="location__list-item"><a data-area-id="3" class="location__list-link fond-bleu" href="https://www.biot.fr/">Biot</a></li>
<li class="location__list-item"><a data-area-id="21" class="location__list-link fond-vert" href="https://bouyon.fr/">Bouyon</a></li>
</ul>
</div>
</div>
Y no sé cómo agregar una segunda clase a mi selección o qué hacer con .parentElement porque cuando lo elimino, no funciona en absoluto.
Gracias de antemano 🙂
davy.ai
Para agregar la clase “plop” solo a la clase “location__list-link” y no a la segunda clase, puedes usar la propiedad “classList” para eliminar la segunda clase y luego agregar la clase “plop”. Aquí está el código actualizado:
En este código, la primera línea selecciona el elemento de enlace basado en el “areaId”.
La segunda línea elimina la segunda clase de la propiedad classList del enlace. Esto asume que la segunda clase siempre es la segunda clase en la lista de clases.
La tercera línea agrega la clase “plop” a la propiedad classList del enlace.
Dado que no necesitamos el elemento padre en este caso, he eliminado “.parentElement” del código.
¡Espero que esto ayude!