1

tengo el siguiente código en mi DOM:

<p class="stars">   
    <span>                          
<a class="star-1" href="#">1</a>                            
<a class="star-2" href="#">2</a>                            
<a class="star-3" href="#">3</a>                            
<a class="star-4" href="#">4</a>                            
<a class="star-5" href="#">5</a>                        
</span>                 
</p>

Necesito que al hacer hover sobre uno de los elementos, este y todos los que estén por delante adquieran una clase llamada "yellow". Es decir, si pongo el cursor en el tercer , debería meterme la clase "yellow" en el primero, el segundo y el tercero.

Esto lo estoy haciendo con jquery de la siguiente manera:

$(".stars span a").each(function (index) {
    $(this).hover(function () {
        if (index + 1 <= $(this).index() + 1) {
            $(".stars span a").toggleClass("yellow")
        }
    });
});

Mi razonamiento es el siguiente: recorro todos los elementos y les añado el escuchador de hover. Después le digo que si index + 1 (este 1 es para que el usuario no tenga problemas con el 0) es menor o igual que la posición del elemento sobre el que tengo posicionado el cursor, entonces me pone la clase yellow. Si esta condición no se cumple, no pone nada y se queda como está.

Esto no hace nada y otras posibilidades que he probado me meten la clase yellow en los cinco elementos. Creo que es un problema de sintaxis pero ya no estoy seguro.

Gracias de antemano.

1 respuesta 1

1

Puede lograr el resultado, utilizando prevAll() para obtener todos los elementos predecesores para luego añadir o remover clases o la lógica que desee realizar.

$(".stars span a").hover(function () {
    $(this).prevAll().toggleClass("yellow")
    $(this).toggleClass("yellow")
});
.yellow
{
  color : yellow;   
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="stars">   
    <span>                          
        <a class="star-1" href="#">1</a>                            
        <a class="star-2" href="#">2</a>                            
        <a class="star-3" href="#">3</a>                            
        <a class="star-4" href="#">4</a>                            
        <a class="star-5" href="#">5</a>                        
    </span>                 
</p>

1
  • Pero qué fácil era!! Muchísimas gracias. el 28 nov. 2020 a las 15:10

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.