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. Commented el 28 nov. 2020 a las 15:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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