Форум

Nesquik · #1 (**permalink**) 07.05.2014, 21:52

Никак не могу дойти как сделать код меньше + если звезд больше 5:

$('.b_comment_form .b_comment_rating a').click(function() {
		if($(this).hasClass('b_comment_star5')) {
			$('.b_comment_form .b_comment_rating a').addClass('hover');
		}
		if($(this).hasClass('b_comment_star4')) {
			$('.b_comment_form .b_comment_rating a').addClass('hover');
			$('.b_comment_form .b_comment_rating a.b_comment_star5').removeClass('hover');
		}
		if($(this).hasClass('b_comment_star3')) {
			$('.b_comment_form .b_comment_rating a').addClass('hover');
			$('.b_comment_form .b_comment_rating a.b_comment_star5').removeClass('hover');
			$('.b_comment_form .b_comment_rating a.b_comment_star4').removeClass('hover');
		}
		if($(this).hasClass('b_comment_star2')) {
			$('.b_comment_form .b_comment_rating a').addClass('hover');
			$('.b_comment_form .b_comment_rating a.b_comment_star5').removeClass('hover');
			$('.b_comment_form .b_comment_rating a.b_comment_star4').removeClass('hover');
			$('.b_comment_form .b_comment_rating a.b_comment_star3').removeClass('hover');
		}
		if($(this).hasClass('b_comment_star1')) {
			$('.b_comment_form .b_comment_rating a').addClass('hover');
			$('.b_comment_form .b_comment_rating a.b_comment_star5').removeClass('hover');
			$('.b_comment_form .b_comment_rating a.b_comment_star4').removeClass('hover');
			$('.b_comment_form .b_comment_rating a.b_comment_star3').removeClass('hover');
			$('.b_comment_form .b_comment_rating a.b_comment_star2').removeClass('hover');
		}
		
		var rating = $(this).attr('rel');
		$('body').find('input[name="b_comment_rating"]').val(rating);
		
		return false;
	});

Vlasenko Fedor · #2 (**permalink**) 07.05.2014, 23:07

$(this).addClass('hover').siblings().removeClass('hover');

по ходу так и живой пример
http://jsfiddle.net/vlasenkofedor/82kSU/

рони · #3 (**permalink**) 07.05.2014, 23:11

Nesquik, добавляйте убирайте звёздочки в html код будет работать с любым количеством - выбираем количество звёзд кликаем - решили изменить выбираем снова

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div{
    display: inline-block;
    padding: 8px;
    background: #8B4513
  }

  div:hover .rating ~ a{
     opacity: 1
  }


 div:hover a:hover ~ a, .rating ~ a{
     opacity: .2
  }
  .star-five {
    float: left;
   margin: 25px 0;
   position: relative;
   display: block;
   color: #FFDF29;
   width: 0px;
   height: 0px;
   border-right:  50px solid transparent;
   border-bottom: 35px  solid #FFDF29;
   border-left:   50px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
   transition: all 1s;
	-moz-transition: all 1s;
	-webkit-transition: all 1s;
	-o-transition: all 1s;

}
.star-five:before {
   border-bottom: 40px solid #FFDF29;
   border-left: 15px solid transparent;
   border-right: 15px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -25px;
   left: -35px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);

}
.star-five:after {
   position: absolute;
   display: block;
   color: #FFDF29;
   top: 3px;
   left: -55px;
   width: 0px;
   height: 0px;
   border-right: 50px solid transparent;
   border-bottom: 35px solid #FFDF29;
   border-left: 50px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
   $(function () {
       var $a = $('#comment_rating a');
       $a.click(function (event) {
           event.preventDefault();
           var rating = $a.index(this);
           $a.removeClass('rating');
           $(this).addClass('rating');
           $('input[name="b_comment_rating"]').val(++rating);
       })
   })
  </script>
</head>

<body>
<div id="comment_rating">
    <a href="" class="star-five"></a>
    <a href="" class="star-five"></a>
    <a href="" class="star-five"></a>
    <a href="" class="star-five"></a>
    <a href="" class="star-five"></a>
    <a href="" class="star-five"></a>
    <a href="" class="star-five"></a>
</div>
<br>
<input name="b_comment_rating">
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript