每当我选择一个评级然后将其清除并悬停在评级上时,我刚刚清除的上一个评级再次显示,就像我再次选择它一样。我怎么能阻止这种情况发生。例如,假设我点击3星评级,然后点击清除,然后我将鼠标悬停在5星评级上并将鼠标从评级中移开,当我选择它时,将突出显示3星评级。我怎么能阻止这一点。
以下是JsFiddle https://jsfiddle.net/a2t0syzh/
的链接HTML
<form method="" action="" id="rating-form">
<fieldset>
<ol>
<li>
<ul class="rating-pick notrated">
<li id="rate-1" data-desc="Bad">
<label for="rating-1">
<input type="radio" value="1" name="rating" id="rating-1" />1 star</label>
</li>
<li id="rate-2" data-desc="Good">
<label for="rating-2">
<input type="radio" value="2" name="rating" id="rating-2" />2 stars</label>
</li>
<li id="rate-3" data-desc="Great">
<label for="rating-3">
<input type="radio" value="3" name="rating" id="rating-3" />3 stars</label>
</li>
<li id="rate-4" data-desc="Better">
<label for="rating-4">
<input type="radio" value="4" name="rating" id="rating-4" />4 stars</label>
</li>
<li id="rate-5" data-desc="Best">
<label for="rating-5">
<input type="radio" value="5" name="rating" id="rating-5" />5 stars</label>
</li>
</ul>
<a class="clear" title="" href="#">Clear</a>
<div class="rate" data-desc="Rate this product">Rate this product</div>
</li>
</ol>
</fieldset>
</form>
Jquery的
$(document).ready(function(){
var rating = 'notrated';
$('.rating-pick li')
.on('mouseenter touchstart', function(){
$(this).parent().removeClass($(this).parent().attr('class').split(' ')[1]);
var classSuffix = $(this).attr('id').split('-')[1];
$('.rating-pick').addClass('rating-' + classSuffix);
$('.rate').text($(this).data('desc'));
})
.on('mouseleave touchend', function(){
var classSuffix = $(this).attr('id').split('-')[1];
$('.rate').text($('.rate').attr('data-desc'));
$('.rating-pick').attr('class', '').addClass('rating-pick ' + rating)
})
.on('change click', function(e){
e.preventDefault();
e.stopPropagation();
$('.rate').attr('data-desc', $(this).attr('data-desc'));
rating = 'rating-' + $(this).attr('id').split('-')[1];
$('.rating-pick').removeClass('notrated').addClass(rating);
$(this).find('input').prop('checked', true);
});
});
$(document).ready(function(){
$('.clear').on('change click', function(e){
e.preventDefault();
e.stopPropagation();
$('#rating-form').find('input:checked').prop('checked', false);
$('#rating-form').find('ul').removeClass().addClass('rating-pick notrated');
});
});
CSS
* {
margin: 0;
padding: 0;
border: 0;
}
#rating-form ol li {
list-style: none;
width: 100%;
float: left;
}
#rating-form label {
display: inline-block;
margin-bottom: 0.2em;
font-weight: bold;
width: 100%;
}
.rate {
float: left;
width: 100%;
margin: -1.4em 0 1.8em 0;
}
.rating-pick {
width: 150px;
height: 30px;
float: left;
margin-bottom: 1.8em;
}
.notrated {
background-image: url('http://s8.postimg.org/xgfpw2679/stars.png');
background-repeat: repeat-x;
background-position: 0px 0px;
}
.rating-1 {
background-image: url('http://s8.postimg.org/xgfpw2679/stars.png');
background-repeat: repeat-x;
background-position: 0px -60px;
}
.rating-2 {
background-image: url('http://s8.postimg.org/xgfpw2679/stars.png');
background-repeat: repeat-x;
background-position: 0px -120px;
}
.rating-3 {
background-image: url('http://s8.postimg.org/xgfpw2679/stars.png');
background-repeat: repeat-x;
background-position: 0px -180px;
}
.rating-4 {
background-image: url('http://s8.postimg.org/xgfpw2679/stars.png');
background-repeat: repeat-x;
background-position: 0px -240px;
}
.rating-5 {
background-image: url('http://s8.postimg.org/xgfpw2679/stars.png');
background-repeat: repeat-x;
background-position: 0px -300px;
}
.rating-pick input[type="radio"],
.rating-pick label {
height: 0 !important;
display: none !important;
}
.rating-pick li {
float: left !important;
width: 30px !important;
height: 30px !important;
display: block !important;
list-style-type: none !important;
cursor: pointer !important;
}
.clear{
display: inline-block;
}
答案 0 :(得分:2)
您正在使用以下行来设置评级:
$('.rating-pick').attr('class', '').addClass('rating-pick ' + rating)
请注意rating
变量是在此$(document).ready
处理程序中定义的,并且在您点击clear
时不会重置。因此,当鼠标离开ul
时,它会将评级重置为rating
变量中存储的内容。
只需进行以下更改:
var rating = 'notrated'; //move rating out of other functions
$(document).ready(function(){
$('.rating-pick li')
然后在点击清除时将评级重置为“已评论”:
$('.clear').on('change click', function(e){
e.preventDefault();
e.stopPropagation();
$('#rating-form').find('input:checked').prop('checked', false);
$('#rating-form').find('ul').removeClass().addClass('rating-pick notrated');
rating='notrated';
});
您fiddle已更新。