Question

我为2个表单创建了评级系统代码，当将这2个表单放在一个页面中时，评级相互冲突。当我点击它时，我想让评级系统正确运行。

这是单一表格的评级系统：

"RTU : Viavi OTU (192.168.1.202) >> C:\snmp\message\trap.txt

<table>
 <tr>

  <td></td>
  <td></td>

 </tr>
</table>

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() {
        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');
        $(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'); 
        $('.ratings_stars').find('i').addClass('fa-star-o').removeClass('fa-star');
        $(this).prevAll().andSelf().find('i').addClass('fa-star').removeClass('fa-star-o'); 
    });

Answer 1

有更好的评分方式。使用Jquery Rateyo插件 Jquery RatYo

转到此链接并检查是否有任何问题请问我

Answer 2

更改代码，以便相对于cliked / hovered元素选择所有元素

 $('.ratings_stars').bind('click', function() {
        $(this).closest('.iva_ratings_choice').next().val( $(this).attr('data-id') );
        $(this).siblings().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_choice .fa-star {
    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="text" name="client_ratings" id="client_ratings">
<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="text" name="client_ratings" id="client_ratings">
<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="text" name="client_ratings" id="client_ratings">

评级与2种形式相冲突

2 个答案: