星级评定:如果我触发了某个功能,则忽略 mouseout
Star rating : ignore mouseout if i trigger a certain function
我正在尝试突出显示开始,所以当用户滚动到星号 3 时,它会点亮这 3 颗星,但不会点亮其他 2 颗星(总共 5 颗星),当我点击一颗星时,我想突出显示它们在鼠标移出时,但因为如果他们不单击星号,我希望鼠标移出仍然有效,我该怎么做?这是我的 jquery:
$('document').ready(function()
{
$('#1_star').on("mouseover", function(){
$('#1_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#2_star').attr("class", "fa fa-star-o fa-3x");
$('#3_star').attr("class", "fa fa-star-o fa-3x");
$('#4_star').attr("class", "fa fa-star-o fa-3x");
$('#5_star').attr("class", "fa fa-star-o fa-3x");
});
$('#2_star').on("mouseover", function(){
$('#1_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#2_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#3_star').attr("class", "fa fa-star-o fa-3x");
$('#4_star').attr("class", "fa fa-star-o fa-3x");
$('#5_star').attr("class", "fa fa-star-o fa-3x");
});
$('#3_star').on("mouseover", function(){
$('#1_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#2_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#3_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#4_star').attr("class", "fa fa-star-o fa-3x");
$('#5_star').attr("class", "fa fa-star-o fa-3x");
});
$('#4_star').on("mouseover", function(){
$('#1_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#2_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#3_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#4_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#5_star').attr("class", "fa fa-star-o fa-3x");
});
$('#5_star').on("mouseover", function(){
$('#1_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#2_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#3_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#4_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#5_star').attr("class", "fa fa-star-o fa-3x alert-success");
});
$('#5_star').on("mouseout", function(){
$('#1_star').attr("class", "fa fa-star-o fa-3x");
$('#2_star').attr("class", "fa fa-star-o fa-3x");
$('#3_star').attr("class", "fa fa-star-o fa-3x");
$('#4_star').attr("class", "fa fa-star-o fa-3x");
$('#5_star').attr("class", "fa fa-star-o fa-3x");
});
$('#4_star').on("mouseout", function(){
$('#1_star').attr("class", "fa fa-star-o fa-3x");
$('#2_star').attr("class", "fa fa-star-o fa-3x");
$('#3_star').attr("class", "fa fa-star-o fa-3x");
$('#4_star').attr("class", "fa fa-star-o fa-3x");
});
$('#3_star').on("mouseout", function(){
$('#1_star').attr("class", "fa fa-star-o fa-3x");
$('#2_star').attr("class", "fa fa-star-o fa-3x");
$('#3_star').attr("class", "fa fa-star-o fa-3x");
});
$('#2_star').on("mouseout", function(){
$('#1_star').attr("class", "fa fa-star-o fa-3x");
$('#2_star').attr("class", "fa fa-star-o fa-3x");
});
$('#1_star').on("mouseout", function(){
$('#1_star').attr("class", "fa fa-star-o fa-3x");
});
$('.review_star').on("click", function(){
var star = $(this).attr('id');
$('#review_rating').val(star);
if(star == 1){
$('#1_star').attr("class", "fa fa-star-o fa-3x alert-success");
}else if(star == 2){
$('#1_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#2_star').attr("class", "fa fa-star-o fa-3x alert-success");
}else if(star == 3){
$('#1_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#2_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#3_star').attr("class", "fa fa-star-o fa-3x alert-success");
}else if(star == 4){
$('#1_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#2_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#3_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#4_star').attr("class", "fa fa-star-o fa-3x alert-success");
}else if(star == 5){
$('#1_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#2_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#3_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#4_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#5_star').attr("class", "fa fa-star-o fa-3x alert-success");
}
});
});
我的html:
<a href="javascript::void();" class="review_star" id="1"><i class="fa fa-star-o fa-3x" id="1_star"></i></a>
<a href="javascript::void();" class="review_star" id="2"><i class="fa fa-star-o fa-3x" id="2_star"></i></a>
<a href="javascript::void();" class="review_star" id="3"><i class="fa fa-star-o fa-3x" id="3_star"></i></a>
<a href="javascript::void();" class="review_star" id="4"><i class="fa fa-star-o fa-3x" id="4_star"></i></a>
<a href="javascript::void();" class="review_star" id="5"><i class="fa fa-star-o fa-3x" id="5_star"></i></a>
<form>
<input type="hidden" id="review_rating" name="rating">
另外,有没有更好的方法来做到这一点,因为我的代码是冗余的并且有重复的代码
抱歉,回答不完整,如果我有时间,我会提供更多。
现在,请检查此方法以避免冗余代码:
<a href="#" class="review_star" data-nstar="1" id="1"><i class="fa fa- star-o fa-3x" id="1_star"></i></a>
<a href="#" class="review_star" data-nstar="2" id="2"><i class="fa fa-star-o fa-3x" id="2_star"></i></a>
<a href="#" class="review_star" data-nstar="3" id="3"><i class="fa fa-star-o fa-3x" id="3_star"></i></a>
<a href="#" class="review_star" data-nstar="4" id="4"><i class="fa fa-star-o fa-3x" id="4_star"></i></a>
<a href="#" class="review_star" data-nstar="5" id="5"><i class="fa fa-star-o fa-3x" id="5_star"></i></a>
$('.review_star').on("mouseover", function(){
//get the position of the star of the data-nstar attribute
var nstar = $(this).data("nstar");
for (var i = 5; i >= 0; i--) {
//if hovered star is smaller than the star (i) in the loop
if (nstar<i) {
$('#'.i.'_star').removeClass("alert-success");
} else{
$('#'.i.'_star').addClass("alert-success");
}
}
});
$('.review_star').on("mouseout", function(){
$(this)removeClass("alert-success");
});
$('.review_star').on("click", function(){
var nstar = $(this).data("nstar");
$('#review_rating').val(star);
for (var i = 5; i >= 0; i--) {
if (nstar<i) {
$('#'.i.'_star').removeClass("alert-success");
} else{
$('#'.i.'_star').addClass("alert-success");
}
}
});
编辑:这应该可以处理我的所有事情? (未测试)
我建议简化它 一点点 - 下面的代码片段使用纯 Javascript,简单易懂且易于使用。它是 CSS 和 JS 的组合,使它起作用——另请注意,我正在为已标记的星设置属性,我建议您使用 jQuery addClass
和removeClass
,但因为我不想在这里使用 jQuery,所以这个解决方案就可以了。
// Get all rate star UL elements
var allRateStars = document.querySelectorAll('.rate-stars');
// Use Array.prototype.slice to convert the NodeList above to a regular Array
// This enables forEach and indexOf, both features we will use
allRateStars = Array.prototype.slice.call(allRateStars);
allRateStars.forEach(function(z){
// Get all stars in this element (as an array, not a NodeList)
var allItems = Array.prototype.slice.call(z.querySelectorAll('li'));
// Add event listeners to each of the LI elements
allItems.forEach(function(a){
a.addEventListener('mousemove', function(e){
// Calculate a rating based on the index of the star you are hovering over
// If you want a rating between 0 and 1, divide this by allItems.length
var rating = allItems.indexOf(this);
// Apply a class for every hovered element
for(var i = 0; i < allItems.length; i++)
if(i <= rating) allItems[i].className = 'hover';
else allItems[i].className = '';
})
a.addEventListener('click', function(e){
var rating = allItems.indexOf(this);
// I am using attributes here, but - if easy - use a class
for(var i = 0; i < allItems.length; i++)
if(i <= rating) allItems[i].setAttribute('data-rated', 1);
else allItems[i].removeAttribute('data-rated');
})
});
// Remove all hovers on mouse out
z.addEventListener('mouseout', function(e){
allItems.forEach(function(a){ a.className = ''; });
})
});
ul {
display: block;
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
width: 20px;
height: 20px;
color: lightgray;
}
ul li[data-rated] {
color: gold;
}
ul li.hover {
color: darkgray;
}
<ul class="rate-stars">
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
</ul>
<h2>Another</h2>
<ul class="rate-stars">
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
</ul>
1) 您的 ID 不应以数字开头:
=> 用于例如 star_1
而不是 1_star
2) 不需要更改完整 类:
$('#1_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#2_star').attr("class", "fa fa-star-o fa-3x");
[...]
应该是:
$('#star_1').addClass("alert-success");
$('#star_2').removeClass("alert-success");
[...]
3) JQuery 选择器可以分组:
$('#star_1').on("mouseover", function() {
$('#star_1').addClass("alert-success");
$('#star_2, #star_3, #star_4, #star_5').removeClass("alert-success");
});
4) 您可以使用 .off()
:
删除事件
$('#star_1, #star_2, #star_3, #star_4, #star_5').off();
片段:
$('#star_1, #star_2, #star_3, #star_4, #star_5').on("mouseover mouseout click", function (e) {
for (var i =1; i<=5; i++) {
if (i <= parseInt(this.id.replace("star_", "")) && e.type !== "mouseout") {
$('#star_'+i).addClass("alert-success");
} else {
$('#star_'+i).removeClass("alert-success");
}
}
});
$('.review_star').on("click", function () {
$('#star_1, #star_2, #star_3, #star_4, #star_5').off("mouseover mouseout");
$('#review_rating').val($(this).attr('id'));
});
.alert-success {
color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<a href="#" class="review_star" id="1"><i class="fa fa-star-o fa-3x" id="star_1"></i></a>
<a href="#" class="review_star" id="2"><i class="fa fa-star-o fa-3x" id="star_2"></i></a>
<a href="#" class="review_star" id="3"><i class="fa fa-star-o fa-3x" id="star_3"></i></a>
<a href="#" class="review_star" id="4"><i class="fa fa-star-o fa-3x" id="star_4"></i></a>
<a href="#" class="review_star" id="5"><i class="fa fa-star-o fa-3x" id="star_5"></i></a>
<form>
<input type="hidden" id="review_rating" name="rating">
我试着简化了它
JSFIDDLE 在这里 http://jsfiddle.net/0cbeuqtd/
HTML
<div id="container">
<a href="javascript::void();" class="review_star" id="1"><i class="fa fa-star-o fa-3x" id="1_star">x</i></a>
<a href="javascript::void();" class="review_star" id="2"><i class="fa fa-star-o fa-3x" id="2_star">x</i></a>
<a href="javascript::void();" class="review_star" id="3"><i class="fa fa-star-o fa-3x" id="3_star">x</i></a>
<a href="javascript::void();" class="review_star" id="4"><i class="fa fa-star-o fa-3x" id="4_star">x</i></a>
<a href="javascript::void();" class="review_star" id="5"><i class="fa fa-star-o fa-3x" id="5_star">x</i></a>
</div>
CSS
.lightup { color: red }
JS
$( "body" ).data( "voted", false );
$( ".review_star" ).mouseover( function() {
if( $( "body" ).data( "voted" ) ) {
return false;
}
var $this = $( this );
var idStr = $this.attr( "id" );
var idNumber = parseInt( idStr );
for( var i = 1; i <= idNumber; i++ ) {
$( "#" + i ).addClass( "lightup" );
}
for( var i = idNumber + 1; i < $( ".review_star ").size(); i++ ) {
$( "#" + i ).removeClass( "lightup" );
}
}).click(function() {
$( "body" ).data( "voted", true );
});
$( "#container" ).mouseout( function() {
if( $( "body" ).data( "voted" ) ) {
return false;
}
$( ".review_star" ).removeClass( "lightup" );
});
我正在尝试突出显示开始,所以当用户滚动到星号 3 时,它会点亮这 3 颗星,但不会点亮其他 2 颗星(总共 5 颗星),当我点击一颗星时,我想突出显示它们在鼠标移出时,但因为如果他们不单击星号,我希望鼠标移出仍然有效,我该怎么做?这是我的 jquery:
$('document').ready(function()
{
$('#1_star').on("mouseover", function(){
$('#1_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#2_star').attr("class", "fa fa-star-o fa-3x");
$('#3_star').attr("class", "fa fa-star-o fa-3x");
$('#4_star').attr("class", "fa fa-star-o fa-3x");
$('#5_star').attr("class", "fa fa-star-o fa-3x");
});
$('#2_star').on("mouseover", function(){
$('#1_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#2_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#3_star').attr("class", "fa fa-star-o fa-3x");
$('#4_star').attr("class", "fa fa-star-o fa-3x");
$('#5_star').attr("class", "fa fa-star-o fa-3x");
});
$('#3_star').on("mouseover", function(){
$('#1_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#2_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#3_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#4_star').attr("class", "fa fa-star-o fa-3x");
$('#5_star').attr("class", "fa fa-star-o fa-3x");
});
$('#4_star').on("mouseover", function(){
$('#1_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#2_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#3_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#4_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#5_star').attr("class", "fa fa-star-o fa-3x");
});
$('#5_star').on("mouseover", function(){
$('#1_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#2_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#3_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#4_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#5_star').attr("class", "fa fa-star-o fa-3x alert-success");
});
$('#5_star').on("mouseout", function(){
$('#1_star').attr("class", "fa fa-star-o fa-3x");
$('#2_star').attr("class", "fa fa-star-o fa-3x");
$('#3_star').attr("class", "fa fa-star-o fa-3x");
$('#4_star').attr("class", "fa fa-star-o fa-3x");
$('#5_star').attr("class", "fa fa-star-o fa-3x");
});
$('#4_star').on("mouseout", function(){
$('#1_star').attr("class", "fa fa-star-o fa-3x");
$('#2_star').attr("class", "fa fa-star-o fa-3x");
$('#3_star').attr("class", "fa fa-star-o fa-3x");
$('#4_star').attr("class", "fa fa-star-o fa-3x");
});
$('#3_star').on("mouseout", function(){
$('#1_star').attr("class", "fa fa-star-o fa-3x");
$('#2_star').attr("class", "fa fa-star-o fa-3x");
$('#3_star').attr("class", "fa fa-star-o fa-3x");
});
$('#2_star').on("mouseout", function(){
$('#1_star').attr("class", "fa fa-star-o fa-3x");
$('#2_star').attr("class", "fa fa-star-o fa-3x");
});
$('#1_star').on("mouseout", function(){
$('#1_star').attr("class", "fa fa-star-o fa-3x");
});
$('.review_star').on("click", function(){
var star = $(this).attr('id');
$('#review_rating').val(star);
if(star == 1){
$('#1_star').attr("class", "fa fa-star-o fa-3x alert-success");
}else if(star == 2){
$('#1_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#2_star').attr("class", "fa fa-star-o fa-3x alert-success");
}else if(star == 3){
$('#1_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#2_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#3_star').attr("class", "fa fa-star-o fa-3x alert-success");
}else if(star == 4){
$('#1_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#2_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#3_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#4_star').attr("class", "fa fa-star-o fa-3x alert-success");
}else if(star == 5){
$('#1_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#2_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#3_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#4_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#5_star').attr("class", "fa fa-star-o fa-3x alert-success");
}
});
});
我的html:
<a href="javascript::void();" class="review_star" id="1"><i class="fa fa-star-o fa-3x" id="1_star"></i></a>
<a href="javascript::void();" class="review_star" id="2"><i class="fa fa-star-o fa-3x" id="2_star"></i></a>
<a href="javascript::void();" class="review_star" id="3"><i class="fa fa-star-o fa-3x" id="3_star"></i></a>
<a href="javascript::void();" class="review_star" id="4"><i class="fa fa-star-o fa-3x" id="4_star"></i></a>
<a href="javascript::void();" class="review_star" id="5"><i class="fa fa-star-o fa-3x" id="5_star"></i></a>
<form>
<input type="hidden" id="review_rating" name="rating">
另外,有没有更好的方法来做到这一点,因为我的代码是冗余的并且有重复的代码
抱歉,回答不完整,如果我有时间,我会提供更多。
现在,请检查此方法以避免冗余代码:
<a href="#" class="review_star" data-nstar="1" id="1"><i class="fa fa- star-o fa-3x" id="1_star"></i></a>
<a href="#" class="review_star" data-nstar="2" id="2"><i class="fa fa-star-o fa-3x" id="2_star"></i></a>
<a href="#" class="review_star" data-nstar="3" id="3"><i class="fa fa-star-o fa-3x" id="3_star"></i></a>
<a href="#" class="review_star" data-nstar="4" id="4"><i class="fa fa-star-o fa-3x" id="4_star"></i></a>
<a href="#" class="review_star" data-nstar="5" id="5"><i class="fa fa-star-o fa-3x" id="5_star"></i></a>
$('.review_star').on("mouseover", function(){
//get the position of the star of the data-nstar attribute
var nstar = $(this).data("nstar");
for (var i = 5; i >= 0; i--) {
//if hovered star is smaller than the star (i) in the loop
if (nstar<i) {
$('#'.i.'_star').removeClass("alert-success");
} else{
$('#'.i.'_star').addClass("alert-success");
}
}
});
$('.review_star').on("mouseout", function(){
$(this)removeClass("alert-success");
});
$('.review_star').on("click", function(){
var nstar = $(this).data("nstar");
$('#review_rating').val(star);
for (var i = 5; i >= 0; i--) {
if (nstar<i) {
$('#'.i.'_star').removeClass("alert-success");
} else{
$('#'.i.'_star').addClass("alert-success");
}
}
});
编辑:这应该可以处理我的所有事情? (未测试)
我建议简化它 一点点 - 下面的代码片段使用纯 Javascript,简单易懂且易于使用。它是 CSS 和 JS 的组合,使它起作用——另请注意,我正在为已标记的星设置属性,我建议您使用 jQuery addClass
和removeClass
,但因为我不想在这里使用 jQuery,所以这个解决方案就可以了。
// Get all rate star UL elements
var allRateStars = document.querySelectorAll('.rate-stars');
// Use Array.prototype.slice to convert the NodeList above to a regular Array
// This enables forEach and indexOf, both features we will use
allRateStars = Array.prototype.slice.call(allRateStars);
allRateStars.forEach(function(z){
// Get all stars in this element (as an array, not a NodeList)
var allItems = Array.prototype.slice.call(z.querySelectorAll('li'));
// Add event listeners to each of the LI elements
allItems.forEach(function(a){
a.addEventListener('mousemove', function(e){
// Calculate a rating based on the index of the star you are hovering over
// If you want a rating between 0 and 1, divide this by allItems.length
var rating = allItems.indexOf(this);
// Apply a class for every hovered element
for(var i = 0; i < allItems.length; i++)
if(i <= rating) allItems[i].className = 'hover';
else allItems[i].className = '';
})
a.addEventListener('click', function(e){
var rating = allItems.indexOf(this);
// I am using attributes here, but - if easy - use a class
for(var i = 0; i < allItems.length; i++)
if(i <= rating) allItems[i].setAttribute('data-rated', 1);
else allItems[i].removeAttribute('data-rated');
})
});
// Remove all hovers on mouse out
z.addEventListener('mouseout', function(e){
allItems.forEach(function(a){ a.className = ''; });
})
});
ul {
display: block;
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
width: 20px;
height: 20px;
color: lightgray;
}
ul li[data-rated] {
color: gold;
}
ul li.hover {
color: darkgray;
}
<ul class="rate-stars">
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
</ul>
<h2>Another</h2>
<ul class="rate-stars">
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
</ul>
1) 您的 ID 不应以数字开头:
=> 用于例如 star_1
而不是 1_star
2) 不需要更改完整 类:
$('#1_star').attr("class", "fa fa-star-o fa-3x alert-success");
$('#2_star').attr("class", "fa fa-star-o fa-3x");
[...]
应该是:
$('#star_1').addClass("alert-success");
$('#star_2').removeClass("alert-success");
[...]
3) JQuery 选择器可以分组:
$('#star_1').on("mouseover", function() {
$('#star_1').addClass("alert-success");
$('#star_2, #star_3, #star_4, #star_5').removeClass("alert-success");
});
4) 您可以使用 .off()
:
$('#star_1, #star_2, #star_3, #star_4, #star_5').off();
片段:
$('#star_1, #star_2, #star_3, #star_4, #star_5').on("mouseover mouseout click", function (e) {
for (var i =1; i<=5; i++) {
if (i <= parseInt(this.id.replace("star_", "")) && e.type !== "mouseout") {
$('#star_'+i).addClass("alert-success");
} else {
$('#star_'+i).removeClass("alert-success");
}
}
});
$('.review_star').on("click", function () {
$('#star_1, #star_2, #star_3, #star_4, #star_5').off("mouseover mouseout");
$('#review_rating').val($(this).attr('id'));
});
.alert-success {
color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<a href="#" class="review_star" id="1"><i class="fa fa-star-o fa-3x" id="star_1"></i></a>
<a href="#" class="review_star" id="2"><i class="fa fa-star-o fa-3x" id="star_2"></i></a>
<a href="#" class="review_star" id="3"><i class="fa fa-star-o fa-3x" id="star_3"></i></a>
<a href="#" class="review_star" id="4"><i class="fa fa-star-o fa-3x" id="star_4"></i></a>
<a href="#" class="review_star" id="5"><i class="fa fa-star-o fa-3x" id="star_5"></i></a>
<form>
<input type="hidden" id="review_rating" name="rating">
我试着简化了它
JSFIDDLE 在这里 http://jsfiddle.net/0cbeuqtd/
HTML
<div id="container">
<a href="javascript::void();" class="review_star" id="1"><i class="fa fa-star-o fa-3x" id="1_star">x</i></a>
<a href="javascript::void();" class="review_star" id="2"><i class="fa fa-star-o fa-3x" id="2_star">x</i></a>
<a href="javascript::void();" class="review_star" id="3"><i class="fa fa-star-o fa-3x" id="3_star">x</i></a>
<a href="javascript::void();" class="review_star" id="4"><i class="fa fa-star-o fa-3x" id="4_star">x</i></a>
<a href="javascript::void();" class="review_star" id="5"><i class="fa fa-star-o fa-3x" id="5_star">x</i></a>
</div>
CSS
.lightup { color: red }
JS
$( "body" ).data( "voted", false );
$( ".review_star" ).mouseover( function() {
if( $( "body" ).data( "voted" ) ) {
return false;
}
var $this = $( this );
var idStr = $this.attr( "id" );
var idNumber = parseInt( idStr );
for( var i = 1; i <= idNumber; i++ ) {
$( "#" + i ).addClass( "lightup" );
}
for( var i = idNumber + 1; i < $( ".review_star ").size(); i++ ) {
$( "#" + i ).removeClass( "lightup" );
}
}).click(function() {
$( "body" ).data( "voted", true );
});
$( "#container" ).mouseout( function() {
if( $( "body" ).data( "voted" ) ) {
return false;
}
$( ".review_star" ).removeClass( "lightup" );
});