我基本上已经编写了评级系统星级评级系统的代码,一切正常,代码很好
<script type="text/javascript">
(function($){
$(document).ready(function() {
var $option = $('.option');
var $fruit = $('.fruit-name');
var $last;
var parent
$option.click(function() {
parent=$(this).parents('.comment-form-rating');
$('.fruit-name',parent).val(this.innerHTML)
})
$(".starr1").hover(function(){
parent=$(this).parents('.comment-form-rating');
$('.starr1',parent).css('color','gold')
},function(){
$(".starr1").css("color","#ddd");
});
$(".starr2").hover(function(){
parent=$(this).parents('.comment-form-rating');
$('.starr1',parent).css('color','gold')
$('.starr2',parent).css('color','gold')
},function(){
$(".starr1").css("color","#ddd");
$(".starr2").css("color","#ddd");
});
$(".starr3").hover(function(){
parent=$(this).parents('.comment-form-rating');
$('.starr1',parent).css('color','gold')
$('.starr2',parent).css('color','gold')
$('.starr3',parent).css('color','gold')
},function(){
$(".starr1").css("color","#ddd");
$(".starr2").css("color","#ddd");
$(".starr3").css("color","#ddd");
});
$(".starr4").hover(function(){
parent=$(this).parents('.comment-form-rating');
$('.starr1',parent).css('color','gold')
$('.starr2',parent).css('color','gold')
$('.starr3',parent).css('color','gold')
$('.starr4',parent).css('color','gold')
},function(){
$(".starr1").css("color","#ddd");
$(".starr2").css("color","#ddd");
$(".starr3").css("color","#ddd");
$(".starr4").css("color","#ddd");
});
$(".starr5").hover(function(){
parent=$(this).parents('.comment-form-rating');
$('.starr1',parent).css('color','gold')
$('.starr2',parent).css('color','gold')
$('.starr3',parent).css('color','gold')
$('.starr4',parent).css('color','gold')
$('.starr5',parent).css('color','gold')
},function(){
$(".starr1").css("color","#ddd");
$(".starr2").css("color","#ddd");
$(".starr3").css("color","#ddd");
$(".starr4").css("color","#ddd");
$(".starr5").css("color","#ddd");
});
});
})(jQuery);
</script>
但是我必须为我的星星定义一个点击功能,当用户点击星星 5 时,所有星星都变成红色——
我是这样定义的
$(".starr5").click(function () {
parent = $(this).parents('.comment-form-rating');
$('.starr1', parent).css('color', '#FF7777')
$('.starr2', parent).css('color', '#FF7777')
$('.starr3', parent).css('color', '#FF7777')
$('.starr4', parent).css('color', '#FF7777')
$('.starr5', parent).css('color', '#FF7777')
});
这就是问题发生的地方 - 现在星形变为红色,但在鼠标离开时它们再次变为灰色,鼠标悬停在黄色功能上时开始工作 - 完全困惑如何编写进一步的代码使其工作。