Звездный рейтинг Нажмите, чтобы добавитьClass function wont work

Question

У меня есть одна проблема с моим кодом js. Я создал это DEMO от codepen.io. В этой демонстрации вы видите, что есть дерево star div.

Когда вы наведите указатель мыши на звезду, тогда .rate-btn-hover добавьте зависающий класс div. Я хочу добавить функцию click, но мой код функции не работает. Что я делаю неправильно, кто-нибудь может мне помочь здесь? 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 1

На самом деле класс добавления, но он удаляется при наведении указателя мыши вне. Поскольку у вас есть другой класс rate-btn-active, вы можете использовать его в событии click, как показано ниже.

$('.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() { 
 
    $(this).siblings().removeClass('rate-btn-active') 
 

 
    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>