现在,当我单击所需的图像评级,然后单击另一个所需的评级,然后决定将鼠标悬停在我单击的第一个评级上时,现在将不显示我第一次单击的星级图像评级。
例如,假设我单击了3星级图像,然后单击了1星级图像,然后将鼠标悬停在3星级图像上,则该图像在悬停时不会出现。
的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>
<div class="rate" data-desc="Rate this product">Rate this product</div>
</li>
</ol>
</fieldset>
</form>
jQuery的
$(document).ready(function() {
var rating;
$('.rating-pick li')
.on('mouseenter touchstart', function() {
var classSuffix = $(this).find('input').attr('id').split('-')[1];
$('.rating-pick').prevAll().addBack().addClass('rating-' + classSuffix);
$('.rating-pick').nextAll().removeClass('notrated');
$('.rate').text($(this).data('desc'));
rating = $('.rating-pick').attr('class').split(' ')[1];
$('.rating-pick').removeClass(rating);
})
.on('mouseleave touchend', function() {
var classSuffix = $(this).find('input').attr('id').split('-')[1];
$('.rating-pick').prevAll().addBack().removeClass('rating-' + classSuffix);
$('.rate').text($('.rate').attr('data-desc'));
$('.rating-pick').addClass(rating);
})
.on('change click', function(e) {
e.preventDefault();
e.stopPropagation();
$('.rate').attr('data-desc', $(this).attr('data-desc'));
var classSuffix = $(this).find('input').attr('id').split('-')[1];
$('ul.rating-pick').removeClass().addClass('rating-pick rating-' + classSuffix);
$(this).off('mouseenter touchstart mouseleave touchend');
});
});
的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;
}
这是运行中的代码http://jsfiddle.net/v6kythze/
这是更新的代码:
$(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);
});
});
您的代码中的问题是由于在元素上关闭了事件。
我删除了该代码并实施了解决方法。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句