¿Cómo rellenar cada circulo al pasar el mouse encima? – javascript jquery html

Pregunta:


¡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>
Preguntado por: Hoose

Shaz

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>

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>

Fuente

Add a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *