星をクリックすると正しく動作しません

Question

評価システム用の小さなコードを作成しました。私は自分のフォームに素晴らしいフォントスターを使用しました。それをクリックすると正しく動作しません。評価システムをクリックすると正しく動作させるようにします。

jQuery(document).ready(function ($) { 
 
    $('.ratings_stars').hover(
 
     // Handles the mouseover 
 
     function() { 
 
      $(this).prevAll().andSelf().addClass('ratings_over'); 
 
      $(this).next('i').slideToggle('500'); 
 
      $(this).find('i').toggleClass('fa-star fa-star-o'); 
 
     }, 
 
     // Handles the mouseout 
 
     function() { 
 
      $(this).prevAll().andSelf().removeClass('ratings_over'); 
 
      $(this).next('i').slideToggle('500'); 
 
      $(this).find('i').toggleClass('fa-star fa-star-o'); 
 
     } 
 
    ); 
 
    
 
    function set_votes(widget) { 
 
     jQuery('.star_' + widget).prevAll().andSelf().addClass('ratings_vote'); 
 
    } 
 
    $('.ratings_stars').bind('click', function() { 
 
     var star = this; 
 
     $(star).prevAll().removeClass('ratings_over'); 
 
     $(star).prevAll().andSelf().addClass('ratings_over'); 
 
     $(this).next('i').slideToggle('500'); 
 
     $(this).find('i').toggleClass('fa-star fa-star-o'); 
 
    \t \t $(star).nextAll().removeClass('ratings_vote'); 
 
     $('#client_ratings').val(jQuery(star).attr('data-id')); 
 
      var data_id =jQuery(star).attr('data-id'); 
 
     jQuery('.star_' + data_id).prevAll().andSelf().addClass('ratings_vote');  
 
    }); 
 
    jQuery('.rate_widgett').each(function(i) { 
 
     $(this).nextAll().removeClass('ratings_vote'); 
 
     $(this).prevAll().removeClass('ratings_vote'); 
 
     var data_count = $(this).attr('data-id'); 
 
     $(this).find('.star_' + data_count).prevAll().andSelf().addClass('ratings_vote'); 
 
    }); 
 
    });

.ratings_choice { 
 
    overflow: visible; 
 
    padding: 10px; 
 
    position: relative; 
 
    width:  180px; 
 
    height:  32px; 
 
} 
 
.ratings_stars { 
 
    float:  left; 
 
    padding: 2px; 
 
} 
 
.ratings_vote { 
 
    color: green; 
 
} 
 
.ratings_choice { 
 
    font: 10px verdana, sans-serif; 
 
    margin: 0 auto 40px auto; 
 
    width: 180px; 
 
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="iva_ratings_choice"> 
 
\t <div id="r1" class="ratings_choice"> 
 
\t <a class="star_1 ratings_stars" data-id="1"><i class="fa fa-star-o fa-3x"></i></a> 
 
\t <a class="star_2 ratings_stars" data-id="2"><i class="fa fa-star-o fa-3x"></i></a> 
 
\t <a class="star_3 ratings_stars" data-id="3"><i class="fa fa-star-o fa-3x"></i></a> 
 
\t <a class="star_4 ratings_stars" data-id="4"><i class="fa fa-star-o fa-3x"></i></a> 
 
\t <a class="star_5 ratings_stars" data-id="5"><i class="fa fa-star-o fa-3x"></i></a> 
 
</div></div> 
 

 
<input type="hidden" name="client_ratings" id="client_ratings">

Answer 1

$(function() { 
 

 
    $(".ratings_stars").hover(function() { 
 
    var hasbeenvoted = $(this).hasClass("ratings_vote"); 
 
    var star = $(this).find("i"); 
 
    if (!hasbeenvoted && star.hasClass("fa-star-o")) { 
 
     star.parent().prevAll().andSelf().find("i").addClass("fa-star").removeClass("fa-star-o"); 
 
    } 
 
    if (hasbeenvoted) { 
 
     star.parent().nextAll().andSelf().find("i").removeClass("fa-star").addClass("fa-star-o"); 
 
    } 
 
    }, function() { 
 
    var hasbeenvoted = $(this).hasClass("ratings_vote"); 
 
    var star = $(this).find("i"); 
 
    if (!hasbeenvoted) { 
 
     star.parent().prevUntil(".ratings_vote").andSelf().find("i").removeClass("fa-star").addClass("fa-star-o"); 
 
    } 
 
    if (hasbeenvoted) { 
 
     star.parent().nextAll().andSelf().filter(".ratings_vote").find("i").addClass("fa-star").removeClass("fa-star-o"); 
 
    } 
 
    }); 
 
    $(".ratings_stars").on("click", function() { 
 
    var id = $(this).data("id"); 
 
    var clicked = $(".ratings_choice").find('*[data-id="' + 
 
     id + '"]'); 
 
    clicked.prevAll().andSelf().addClass("ratings_vote"); 
 
    clicked.prevAll().andSelf().find("i").addClass(
 
     "fa-star").removeClass("fa-star-o"); 
 
    clicked.nextAll().removeClass("ratings_vote"); 
 
    clicked.nextAll().find("i").removeClass("fa-star").addClass(
 
     "fa-star-o"); 
 
    }); 
 
});

.ratings_choice { 
 
    overflow: visible; 
 
    padding: 10px; 
 
    position: relative; 
 
    width: 180px; 
 
    height: 32px; 
 
} 
 
.ratings_stars { 
 
    float: left; 
 
    padding: 2px; 
 
    cursor: pointer; 
 
} 
 
.ratings_vote { 
 
    color: green; 
 
} 
 
.ratings_choice { 
 
    font: 10px verdana, sans-serif; 
 
    margin: 0 auto 40px auto; 
 
    width: 180px; 
 
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="iva_ratings_choice"> 
 
    <div id="r1" class="ratings_choice"> 
 
    <a class="star_1 ratings_stars" data-id="1"><i class="fa fa-star-o fa-3x"></i></a> 
 
    <a class="star_2 ratings_stars" data-id="2"><i class="fa fa-star-o fa-3x"></i></a> 
 
    <a class="star_3 ratings_stars" data-id="3"><i class="fa fa-star-o fa-3x"></i></a> 
 
    <a class="star_4 ratings_stars" data-id="4"><i class="fa fa-star-o fa-3x"></i></a> 
 
    <a class="star_5 ratings_stars" data-id="5"><i class="fa fa-star-o fa-3x"></i></a> 
 
    </div> 
 
</div> 
 

 
<input type="hidden" name="client_ratings" id="client_ratings">

Answer 2

をあなたはこのような何かをしたい：

これは私が使用しているコードのですか？

jQuery(document).ready(function($) { 
 
    $('.ratings_stars').hover(
 
    // Handles the mouseover 
 
    function() { 
 
     $('.ratings_stars').removeClass('ratings_over'); 
 
     $(this).prevAll().andSelf().addClass('ratings_over'); 
 
    } 
 
); 
 

 
    $('.ratings_stars').bind('click', function() { 
 
    var star = this; 
 
    $(this).prevAll().andSelf().addClass('ratings_over'); 
 
    }); 
 
});

.ratings_choice { 
 
    overflow: visible; 
 
    padding: 10px; 
 
    position: relative; 
 
    width: 180px; 
 
    height: 32px; 
 
} 
 
.ratings_stars { 
 
    float: left; 
 
    padding: 2px; 
 
} 
 
.ratings_vote { 
 
    color: green; 
 
} 
 
.ratings_choice { 
 
    font: 10px verdana, sans-serif; 
 
    margin: 0 auto 40px auto; 
 
    width: 180px; 
 
} 
 
.ratings_over { 
 
    color: green; 
 
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="iva_ratings_choice"> 
 
    <div id="r1" class="ratings_choice"> 
 
    <a class="star_1 ratings_stars" data-id="1"><i class="fa fa-star-o fa-3x"></i></a> 
 
    <a class="star_2 ratings_stars" data-id="2"><i class="fa fa-star-o fa-3x"></i></a> 
 
    <a class="star_3 ratings_stars" data-id="3"><i class="fa fa-star-o fa-3x"></i></a> 
 
    <a class="star_4 ratings_stars" data-id="4"><i class="fa fa-star-o fa-3x"></i></a> 
 
    <a class="star_5 ratings_stars" data-id="5"><i class="fa fa-star-o fa-3x"></i></a> 
 
    </div> 
 
</div> 
 

 
<input type="hidden" name="client_ratings" id="client_ratings">

または：

jQuery(document).ready(function($) { 
 
    $('.ratings_stars').hover(
 
    // Handles the mouseover 
 
    function() { 
 
     $('.ratings_stars').find('i').addClass('fa-star-o').removeClass('fa-star'); 
 
     $(this).prevAll().andSelf().find('i').addClass('fa-star').removeClass('fa-star-o'); 
 
    } 
 
); 
 

 
    $('.ratings_stars').bind('click', function() { 
 
    var star = this; 
 
    $(this).prevAll().andSelf().find('i').addClass('fa-star').removeClass('fa-star-o'); 
 
    }); 
 
});

.ratings_choice { 
 
    overflow: visible; 
 
    padding: 10px; 
 
    position: relative; 
 
    width: 180px; 
 
    height: 32px; 
 
} 
 
.ratings_stars { 
 
    float: left; 
 
    padding: 2px; 
 
} 
 
.ratings_vote { 
 
    color: green; 
 
} 
 
.ratings_choice { 
 
    font: 10px verdana, sans-serif; 
 
    margin: 0 auto 40px auto; 
 
    width: 180px; 
 
} 
 
.ratings_over { 
 
    color: green; 
 
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="iva_ratings_choice"> 
 
    <div id="r1" class="ratings_choice"> 
 
    <a class="star_1 ratings_stars" data-id="1"><i class="fa fa-star-o fa-3x"></i></a> 
 
    <a class="star_2 ratings_stars" data-id="2"><i class="fa fa-star-o fa-3x"></i></a> 
 
    <a class="star_3 ratings_stars" data-id="3"><i class="fa fa-star-o fa-3x"></i></a> 
 
    <a class="star_4 ratings_stars" data-id="4"><i class="fa fa-star-o fa-3x"></i></a> 
 
    <a class="star_5 ratings_stars" data-id="5"><i class="fa fa-star-o fa-3x"></i></a> 
 
    </div> 
 
</div> 
 

 
<input type="hidden" name="client_ratings" id="client_ratings">

又は

 $('.ratings_stars').hover(
 
     // Handles the mouseover 
 
     function() { 
 
      $('.ratings_stars').find('i').addClass('fa-star-o').removeClass('fa-star'); 
 
      $(this).prevAll().andSelf().find('i').addClass('fa-star').removeClass('fa-star-o'); 
 
     }, function() { 
 
      $('.ratings_stars').find('i').addClass('fa-star-o').removeClass('fa-star'); 
 

 
     } 
 
    ); 
 

 
     $('.ratings_stars').bind('click', function() { 
 
     $('.ratings_stars').removeClass('ratings_over'); 
 
     $(this).prevAll().andSelf().addClass('ratings_over'); 
 
     });

.ratings_choice { 
 
    overflow: visible; 
 
    padding: 10px; 
 
    position: relative; 
 
    width: 180px; 
 
    height: 32px; 
 
} 
 
.ratings_stars { 
 
    float: left; 
 
    padding: 2px; 
 
} 
 
.ratings_vote { 
 
    color: green; 
 
} 
 
.ratings_choice { 
 
    font: 10px verdana, sans-serif; 
 
    margin: 0 auto 40px auto; 
 
    width: 180px; 
 
} 
 
.ratings_over { 
 
    color: green; 
 
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="iva_ratings_choice"> 
 
    <div id="r1" class="ratings_choice"> 
 
    <a class="star_1 ratings_stars" data-id="1"><i class="fa fa-star-o fa-3x"></i></a> 
 
    <a class="star_2 ratings_stars" data-id="2"><i class="fa fa-star-o fa-3x"></i></a> 
 
    <a class="star_3 ratings_stars" data-id="3"><i class="fa fa-star-o fa-3x"></i></a> 
 
    <a class="star_4 ratings_stars" data-id="4"><i class="fa fa-star-o fa-3x"></i></a> 
 
    <a class="star_5 ratings_stars" data-id="5"><i class="fa fa-star-o fa-3x"></i></a> 
 
    </div> 
 
</div> 
 

 
<input type="hidden" name="client_ratings" id="client_ratings">

または：

jQuery(document).ready(function($) { 
 
    $('.ratings_stars').hover(
 
    // Handles the mouseover 
 
    function() { 
 
     $('.ratings_stars').removeClass('ratings_over'); 
 
    $(this).prevAll().andSelf().addClass('ratings_over'); 
 
     
 
    }, function() { 
 
     $('.ratings_stars').removeClass('ratings_over'); 
 
     
 

 
    } 
 
); 
 

 
    $('.ratings_stars').bind('click', function() { 
 
    $('.ratings_stars').find('i').addClass('fa-star-o').removeClass('fa-star'); 
 
     $(this).prevAll().andSelf().find('i').addClass('fa-star').removeClass('fa-star-o'); 
 
    }); 
 
});

.ratings_choice { 
 
    overflow: visible; 
 
    padding: 10px; 
 
    position: relative; 
 
    width: 180px; 
 
    height: 32px; 
 
} 
 
.ratings_stars { 
 
    float: left; 
 
    padding: 2px; 
 
} 
 
.ratings_vote { 
 
    color: green; 
 
} 
 
.ratings_choice { 
 
    font: 10px verdana, sans-serif; 
 
    margin: 0 auto 40px auto; 
 
    width: 180px; 
 
} 
 
.ratings_over { 
 
    color: green; 
 
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="iva_ratings_choice"> 
 
    <div id="r1" class="ratings_choice"> 
 
    <a class="star_1 ratings_stars" data-id="1"><i class="fa fa-star-o fa-3x"></i></a> 
 
    <a class="star_2 ratings_stars" data-id="2"><i class="fa fa-star-o fa-3x"></i></a> 
 
    <a class="star_3 ratings_stars" data-id="3"><i class="fa fa-star-o fa-3x"></i></a> 
 
    <a class="star_4 ratings_stars" data-id="4"><i class="fa fa-star-o fa-3x"></i></a> 
 
    <a class="star_5 ratings_stars" data-id="5"><i class="fa fa-star-o fa-3x"></i></a> 
 
    </div> 
 
</div> 
 

 
<input type="hidden" name="client_ratings" id="client_ratings">

または：

jQuery(document).ready(function($) { 
 
    $('.ratings_stars').hover(
 
    // Handles the mouseover 
 
    function() { 
 
     $('.ratings_stars').find('i').addClass('fa-star-o').removeClass('fa-star'); 
 
     $('.ratings_stars').removeClass('ratings_over'); 
 
    $(this).prevAll().andSelf().addClass('ratings_over'); 
 
     
 
    }, function() { 
 
     $('.ratings_stars').removeClass('ratings_over'); 
 
     
 

 
    } 
 
); 
 

 
    $('.ratings_stars').bind('click', function() { 
 
    $('.ratings_stars').find('i').addClass('fa-star-o').removeClass('fa-star'); 
 
     $(this).prevAll().andSelf().find('i').addClass('fa-star').removeClass('fa-star-o'); 
 
    }); 
 
});

.ratings_choice { 
 
    overflow: visible; 
 
    padding: 10px; 
 
    position: relative; 
 
    width: 180px; 
 
    height: 32px; 
 
} 
 
.ratings_stars { 
 
    float: left; 
 
    padding: 2px; 
 
} 
 
.ratings_vote { 
 
    color: green; 
 
} 
 
.ratings_choice { 
 
    font: 10px verdana, sans-serif; 
 
    margin: 0 auto 40px auto; 
 
    width: 180px; 
 
} 
 
.ratings_over { 
 
    color: green; 
 
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="iva_ratings_choice"> 
 
    <div id="r1" class="ratings_choice"> 
 
    <a class="star_1 ratings_stars" data-id="1"><i class="fa fa-star-o fa-3x"></i></a> 
 
    <a class="star_2 ratings_stars" data-id="2"><i class="fa fa-star-o fa-3x"></i></a> 
 
    <a class="star_3 ratings_stars" data-id="3"><i class="fa fa-star-o fa-3x"></i></a> 
 
    <a class="star_4 ratings_stars" data-id="4"><i class="fa fa-star-o fa-3x"></i></a> 
 
    <a class="star_5 ratings_stars" data-id="5"><i class="fa fa-star-o fa-3x"></i></a> 
 
    </div> 
 
</div> 
 

 
<input type="hidden" name="client_ratings" id="client_ratings">

Answer 3

これはCSSでのみ実行できます。

ピュアCSSホテルランクウィジェット

<fieldset class="rating"> 
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label> 
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label> 
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label> 
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label> 
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label> 
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label> 
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label> 
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label> 
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label> 
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label> 
</fieldset> 

そしてCSS

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); 
fieldset, 
label { 
    margin: 0; 
    padding: 0; 
} 
body { 
    margin: 20px; 
} 
h1 { 
    font-size: 1.5em; 
    margin: 10px; 
} 
/****** Style Star Rating Widget *****/ 

.rating { 
    border: none; 
    float: left; 
} 
.rating > input { 
    display: none; 
} 
.rating > label:before { 
    margin: 5px; 
    font-size: 1.25em; 
    font-family: FontAwesome; 
    display: inline-block; 
    content: "\f005"; 
} 
.rating > .half:before { 
    content: "\f089"; 
    position: absolute; 
} 
.rating > label { 
    color: #ddd; 
    float: right; 
} 
/***** CSS Magic to Highlight Stars on Hover *****/ 

.rating > input:checked ~ label, 
/* show gold star when clicked */ 

.rating:not(:checked) > label:hover, 
/* hover current star */ 

.rating:not(:checked) > label:hover ~ label { 
    color: #FFD700; 
} 
/* hover previous stars in list */ 

.rating > input:checked + label:hover, 
/* hover current star when changing rating */ 

.rating > input:checked ~ label:hover, 
.rating > label:hover ~ input:checked ~ label, 
/* lighten current selection */ 

.rating > input:checked ~ label:hover ~ label { 
    color: #FFED85; 
} 

、これは

感謝を助けdemo
希望のためにこれをフォロー