DevStud DevStud - 1 month ago 12
CSS Question

Star rating click to addClass function wont work

I have one problem with my js code. I have created this DEMO from codepen.io. In this demo you can see there are tree star div.

When you hover the star then

.rate-btn-hover
adding hovered div class. I want to add also click function but my click function code doesn't work. What i am doing wrong anyone can help me here ?
HTML

<div class="container">
<div class="div">
<div class="rate-ex1-cnt" id"ab">
<div id="1" class="star star-one-1 rate-btn star-one"></div>
<div id="2" class="star star-one-2 rate-btn star-one"></div>
<div id="3" class="star star-one-3 rate-btn star-one"></div>
<div id="4" class="star star-one-4 rate-btn star-one"></div>
<div id="5" class="star star-one-5 rate-btn star-one"></div>
</div>
</div>
<div class="div">
<div class="rate-ex2-cnt">
<div id="1" class="star star-two-1 rate-btn star-two"></div>
<div id="2" class="star star-two-2 rate-btn star-two"></div>
<div id="3" class="star star-two-3 rate-btn star-two"></div>
<div id="4" class="star star-two-4 rate-btn star-two"></div>
<div id="5" class="star star-two-5 rate-btn star-two"></div>
</div>
</div>
<div class="div">
<div class="rate-ex3-cnt">
<div id="1" class="star star-tree-1 rate-btn star-tree"></div>
<div id="2" class="star star-tree-2 rate-btn star-tree"></div>
<div id="3" class="star star-tree-3 rate-btn star-tree"></div>
<div id="4" class="star star-tree-4 rate-btn star-tree"></div>
<div id="5" class="star star-tree-5 rate-btn star-tree"></div>
</div>
</div>
</div>


CSS

body {
/*background-color:#000000;*/
}
.container {
position:relative;
width:100%;
max-width:500px;
margin:0px auto;
margin-top:50px;
}
.div {
position:relative;
width:100%;
margin-bottom:10px;
float:left;
}

.rate-ex1-cnt{
width:150px; height: 30px;
border:#e9e9e9 1px solid;
background-color: #f6f6f6;
}
.rate-ex1-cnt .rate-btn{
width: 30px; height:30px;
float: left;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png) no-repeat;
cursor: pointer;
}
.rate-ex1-cnt .rate-btn:hover, .rate-ex1-cnt .rate-btn-hover, .rate-ex1-cnt .rate-btn-active{
background: url(https://dl.dropboxusercontent.com/u/683504/www.codepen.io/stars.png) no-repeat;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
-webkit-animation-duration: .75s;
animation-duration: .75s
}

.rate-ex2-cnt{
width:150px; height: 30px;
border:#e9e9e9 1px solid;
background-color: #f6f6f6;
}
.rate-ex2-cnt .rate-btn{
width: 30px; height:30px;
float: left;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png) no-repeat;
cursor: pointer;
}
.rate-ex2-cnt .rate-btn:hover, .rate-ex2-cnt .rate-btn-hover, .rate-ex2-cnt .rate-btn-active{
background: url(https://dl.dropboxusercontent.com/u/683504/www.codepen.io/stars.png) no-repeat;

-webkit-animation-name: flipInX;
animation-name: flipInX;
-webkit-animation-duration: .75s;
animation-duration: .75s
}
.rate-ex3-cnt{
width:150px; height: 30px;
border:#e9e9e9 1px solid;
background-color: #f6f6f6;
}
.rate-ex3-cnt .rate-btn{
width: 30px; height:30px;
float: left;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png) no-repeat;
cursor: pointer;
}
.rate-ex3-cnt .rate-btn:hover, .rate-ex3-cnt .rate-btn-hover, .rate-ex3-cnt .rate-btn-active{
background: url(https://dl.dropboxusercontent.com/u/683504/www.codepen.io/stars.png) no-repeat;

-webkit-animation-name: rotateIn;
animation-name: rotateIn;
-webkit-animation-duration: .75s;
animation-duration: .75s
}


JS

var prevStars = $(this).prevAll();
var nextStars = $(this).nextAll();

$('.star').on('mouseover',function() {
var prevStars = $(this).prevAll();
prevStars.addClass('rate-btn-hover');
});
$('.star').on('mouseout',function(){
var prevStars = $(this).prevAll();
prevStars.removeClass('rate-btn-hover');
});
// Add rate-btn-hover after click
$("body").on("click", ".star", function(){
var prevStars = $(this).prevAll();
prevStars.addClass('rate-btn-hover');
});

Answer

Actually class is adding but it is removed when you mouse out. Since you have another class rate-btn-active you can use it in click event like following.

$('.star').on('mouseover', function() {
  var prevStars = $(this).prevAll();
  prevStars.addClass('rate-btn-hover');
});
$('.star').on('mouseout', function() {
  var prevStars = $(this).prevAll();
  prevStars.removeClass('rate-btn-hover');
});
// Add rate-btn-hover after click
$("body").on("click", ".star", function() {
  var prevStars = $(this).prevAll().addBack();
  prevStars.addClass('rate-btn-active');
});
.container {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0px auto;
  margin-top: 50px;
}

.div {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
  float: left;
}

.rate-ex1-cnt {
  width: 150px;
  height: 30px;
  border: #e9e9e9 1px solid;
  background-color: #f6f6f6;
}

.rate-ex1-cnt .rate-btn {
  width: 30px;
  height: 30px;
  float: left;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png) no-repeat;
  cursor: pointer;
}

.rate-ex1-cnt .rate-btn:hover,
.rate-ex1-cnt .rate-btn-hover,
.rate-ex1-cnt .rate-btn-active {
  background: url(https://dl.dropboxusercontent.com/u/683504/www.codepen.io/stars.png) no-repeat;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-duration: .75s;
  animation-duration: .75s
}

.rate-ex2-cnt {
  width: 150px;
  height: 30px;
  border: #e9e9e9 1px solid;
  background-color: #f6f6f6;
}

.rate-ex2-cnt .rate-btn {
  width: 30px;
  height: 30px;
  float: left;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png) no-repeat;
  cursor: pointer;
}

.rate-ex2-cnt .rate-btn:hover,
.rate-ex2-cnt .rate-btn-hover,
.rate-ex2-cnt .rate-btn-active {
  background: url(https://dl.dropboxusercontent.com/u/683504/www.codepen.io/stars.png) no-repeat;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
  -webkit-animation-duration: .75s;
  animation-duration: .75s
}

.rate-ex3-cnt {
  width: 150px;
  height: 30px;
  border: #e9e9e9 1px solid;
  background-color: #f6f6f6;
}

.rate-ex3-cnt .rate-btn {
  width: 30px;
  height: 30px;
  float: left;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png) no-repeat;
  cursor: pointer;
}

.rate-ex3-cnt .rate-btn:hover,
.rate-ex3-cnt .rate-btn-hover,
.rate-ex3-cnt .rate-btn-active {
  background: url(https://dl.dropboxusercontent.com/u/683504/www.codepen.io/stars.png) no-repeat;
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
  -webkit-animation-duration: .75s;
  animation-duration: .75s
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="div">
    <div class="rate-ex1-cnt" id "ab">
      <div id="1" class="star star-one-1 rate-btn star-one"></div>
      <div id="2" class="star star-one-2 rate-btn star-one"></div>
      <div id="3" class="star star-one-3 rate-btn star-one"></div>
      <div id="4" class="star star-one-4 rate-btn star-one"></div>
      <div id="5" class="star star-one-5 rate-btn star-one"></div>
    </div>
  </div>
  <div class="div">
    <div class="rate-ex2-cnt">
      <div id="1" class="star star-two-1 rate-btn star-two"></div>
      <div id="2" class="star star-two-2 rate-btn star-two"></div>
      <div id="3" class="star star-two-3 rate-btn star-two"></div>
      <div id="4" class="star star-two-4 rate-btn star-two"></div>
      <div id="5" class="star star-two-5 rate-btn star-two"></div>
    </div>
  </div>
  <div class="div">
    <div class="rate-ex3-cnt">
      <div id="1" class="star star-tree-1 rate-btn star-tree"></div>
      <div id="2" class="star star-tree-2 rate-btn star-tree"></div>
      <div id="3" class="star star-tree-3 rate-btn star-tree"></div>
      <div id="4" class="star star-tree-4 rate-btn star-tree"></div>
      <div id="5" class="star star-tree-5 rate-btn star-tree"></div>
    </div>
  </div>
</div>