Как заполнить каждый кружок при наведении?

Привет! Я практикую JQuery, и я хотел бы сделать как рейтинг. Что я хочу получить, так это то, что каждый раз, когда мышь проходит над каждым кружком, он заполняется, насколько я выразился.

То есть, у меня есть 5 кругов, если я поместил мышь в третий круг, я бы хотел, чтобы он был заполнен цветом до третьего. Если я поставлю это в первый круг, заполните только первый и так ...

Я до сих пор не могу понять, как это сделать, я оставляю вам более четкий пример того, что я хотел бы, чтобы вы делали по следующей ссылке: , нажмите здесь .

$(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;
	  }



    Piedra, Papel o Tijera :)
    
    
	
	


	

Rating

1
задан 10.09.2016, 04:31
2 ответа

Самая простая форма с jquery и код, который у тебя есть, - используя prevAll() и addBack(), посредством которых:

  • .prevAll () найди предыдущие элементы в DOM, в том же уровне элемента или селектора.
  • .addBack () "позвони" в предыдущий элемент, выбранный поездкой DOM, и он это добавляет к настоящей коллекции. В этом случае позволь добавлять настоящий элемент, из-за которого он инициализирует поиски $(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>
2
ответ дан 24.11.2019, 13:26

Используя ее funciГіn prev jQuery могут создавать одну funciГіn переиталик, в котором он envГ - объект, который получает ее acciГіn от mouseover, и последующий ищите предыдущий элемент, который выполняет тот же селектор.

$(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>
1
ответ дан 24.11.2019, 13:26

Теги

Похожие вопросы