星级评分：如果我触发某个功能，则忽略mouseout

Question

我正在尝试突出开始，所以当用户滚动星星3时，它会点亮3颗星而不是其他2颗星（总共5颗星），当我点击一颗星时，我想要突出显示它们甚至鼠标out，但因为如果他们没有点击星号我想让鼠标仍然工作，我怎么能这样做？这是我的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">

此外，有没有更好的方法来执行此操作，因为我的代码是冗余的并且具有重复的代码

Answer 1

1）您的ID不应以数字开头：

=＆GT;用于例如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();

<强>片段：

＆＃13;

＆＃13;

$('#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'));
});

＆＃13;

.alert-success {
    color:green;
}

＆＃13;

<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">

＆＃13;

＆＃13;

＆＃13;

Answer 2

对不完整的答案感到抱歉，如果我有时间，我会提供更多。

现在，请检查此方法以避免冗余代码：

<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");
        }
    }
});

编辑：这应该处理我所做的一切？ （UNTESTED）

Answer 3

我建议简化它只是一点点 - 下面的代码片段与纯Javascript一起使用，只是简单易懂和易于使用。它结合了CSS和JS，使其工作 - 还要注意我正在设置一个已标记的星的属性，我建议您使用jQuery addClass和removeClass，但由于我不想在这里使用jQuery，这个解决方案就可以了。

＆＃13;

＆＃13;

// 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 = ''; });
    })
});

＆＃13;

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;
}

＆＃13;

<ul class="rate-stars">
  <li>&#9733;</li>
  <li>&#9733;</li>
  <li>&#9733;</li>
  <li>&#9733;</li>
  <li>&#9733;</li>
</ul>

<h2>Another</h2>

<ul class="rate-stars">
  <li>&#9733;</li>
  <li>&#9733;</li>
  <li>&#9733;</li>
  <li>&#9733;</li>
  <li>&#9733;</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 4

我试图简化它

JSFIDDLE HERE 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" );
});