1

¡Hola! Estoy practicando jQuery, y me gustaría poder hacer como un ranking. A lo que quiero llegar es que cada vez que el mouse pase sobre cada círculo se rellene hasta donde lo pongo.

Es decir, tengo 5 circulos, si pongo el mouse en el tercer círculo, me gustaría que se rellenará de un color hasta el tercero. Si lo pongo en el primer círculo, que se rellene solo el primero y así...

Aún no logro como hacerlo, les dejo un ejemplo más claro de lo que me gustaría que hiciera en el siguiente enlace, clic aquí.

$(function () {
	$('.rating-circle').mouseover(function(){
		$('.rating-circle').addClass('rating-hover');
	}).mouseleave(function(){
		$('.rating-circle').removeClass('rating-hover');
	});
});
body {
	   font-family: Verdana;
	  }
	  h1, h2, h3 {
	   color: darkblue;
	  }
	  .rating-circle {
	   height: 2em;
	   width: 2em;
	   border: .1em solid black;
	   border-radius: 1.1em;
	   display: inline-block;
	   margin: 0;
	   padding: .1em;
	  }

	  .rating-hover {
	   background-color: yellow;
	  }

	  .rating-chosen {
	   background-color: green;
	  }
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Piedra, Papel o Tijera :)</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
	<div class="container">
        <h1 class="page-header">Rating</h1>
		<div id="rating-container">
			<div class="rating-circle"></div>
			<div class="rating-circle"></div>
			<div class="rating-circle"></div>
			<div class="rating-circle"></div>
			<div class="rating-circle"></div>
	 	</div>
	</div>
</body>
</html>

2 respuestas 2

2

La forma más sencilla con jquery y el código que tienes, es usando prevAll() y addBack(), por medio de los cuales:

  • .prevAll() encuentra los elementos anteriores en el DOM, en el mismo nivel del elemento o selector.
  • .addBack() "llama" al elemento anterior seleccionado por un recorrido del DOM, y lo agrega a la colección actual. En este caso permite agregar el elemento actual, por el cual inicia la búsqueda $(this)

$(function () {
	$('.rating-circle').mouseover(function(){
		$(this).prevAll().addBack().addClass('rating-hover');
	}).mouseleave(function(){
		$(this).prevAll().addBack().removeClass('rating-hover');
	});
});
body {
	   font-family: Verdana;
	  }
	  h1, h2, h3 {
	   color: darkblue;
	  }
	  .rating-circle {
	   height: 2em;
	   width: 2em;
	   border: .1em solid black;
	   border-radius: 1.1em;
	   display: inline-block;
	   margin: 0;
	   padding: .1em;
	  }

	  .rating-hover {
	   background-color: yellow;
	  }

	  .rating-chosen {
	   background-color: green;
	  }
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Piedra, Papel o Tijera :)</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
	<div class="container">
        <h1 class="page-header">Rating</h1>
		<div id="rating-container">
			<div class="rating-circle"></div>
			<div class="rating-circle"></div>
			<div class="rating-circle"></div>
			<div class="rating-circle"></div>
			<div class="rating-circle"></div>
	 	</div>
	</div>
</body>
</html>

1

Haciendo uso de la función prev de jQuery se puede crear una función recursiva en la cual le envíes el objeto que recibe la acción del mouseover y posterior busque el elemento anterior que cumpla con el mismo selector.

$(function() {
  $('.rating-circle')
    .mouseover(function() {
      rellenar(this);
    })
    .mouseleave(function() {
      vaciar(this);
    });
});

function rellenar(objDiv) {
  $(objDiv).addClass("rating-hover");
  rellenar($(objDiv).prev(".rating-circle"));
}

function vaciar(objDiv) {
  $(objDiv).removeClass("rating-hover");
  vaciar($(objDiv).prev(".rating-circle"));
}
h1,
h2,
h3 {
  color: darkblue;
}
.rating-circle {
  height: 2em;
  width: 2em;
  border: .1em solid black;
  border-radius: 1.1em;
  display: inline-block;
  margin: 0;
  padding: .1em;
}
.rating-hover {
  background-color: yellow;
}
.rating-chosen {
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1 class="page-header">Rating</h1>
  <div id="rating-container">
    <div class="rating-circle"></div>
    <div class="rating-circle"></div>
    <div class="rating-circle"></div>
    <div class="rating-circle"></div>
    <div class="rating-circle"></div>
  </div>
</div>

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.