星级评价 jquery 不适用于多个实例

Question

我已经使用了这个https://codepen.io/alisuarez/pen/RWGNLm中使用的jQuery

这里的问题是，由于函数中使用了类，因此所有星级评分同时工作。在 jQuery 中，当我使用 ID 时，它按预期适用于特定的评级行。我正在将该行动态地克隆成多行。如何为每个 id star-rating1、star-rating2 等运行 jQuery？ 任何帮助将不胜感激。提前致谢！

var $star_rating = $('#star-rating .fa');

var SetRatingStar = function() {
  return $star_rating.each(function() {
    if (parseInt($star_rating.siblings('input.rating-value').val()) >=
      parseInt($(this).data('rating'))) {
      return $(this).removeClass('fa-star-o').addClass('fa-star');
    } else {
      return $(this).removeClass('fa-star').addClass('fa-star-o');
    }
  });
};

$star_rating.on('click', function() {
  $star_rating.siblings('input.rating-value').val($(this).data('rating'));
  return SetRatingStar();
});

SetRatingStar();

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="star-rating" id="star-rating">
        <span class="fa fa-star-o" data-rating="1"></span>
        <span class="fa fa-star-o" data-rating="2"></span>
        <span class="fa fa-star-o" data-rating="3"></span>
        <span class="fa fa-star-o" data-rating="4"></span>
        <span class="fa fa-star-o" data-rating="5"></span>
        <input type="hidden" name="whatever1" class="rating-value" value="2.56">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="star-rating" id="star-rating">
        <span class="fa fa-star-o" data-rating="1"></span>
        <span class="fa fa-star-o" data-rating="2"></span>
        <span class="fa fa-star-o" data-rating="3"></span>
        <span class="fa fa-star-o" data-rating="4"></span>
        <span class="fa fa-star-o" data-rating="5"></span>
        <input type="hidden" name="whatever2" class="rating-value" value="1.9">
      </div>
    </div>
  </div>

Answer 1

以下代码按预期工作
HTML

<div class="container">
     <div class="row">
     <div class="col-lg-12 abc">
  <div class="star-rating">
    <span class="fa fa-star-o" data-rating="1"></span>
    <span class="fa fa-star-o" data-rating="2"></span>
    <span class="fa fa-star-o" data-rating="3"></span>
    <span class="fa fa-star-o" data-rating="4"></span>
    <span class="fa fa-star-o" data-rating="5"></span>
    <input type="hidden" name="whatever1" class="rating-value" value="2.56">
  </div>
 </div>
</div>
<div class="row">
<div class="col-lg-12 abc">
  <div class="star-rating">
    <span class="fa fa-star-o" data-rating="1"></span>
    <span class="fa fa-star-o" data-rating="2"></span>
    <span class="fa fa-star-o" data-rating="3"></span>
    <span class="fa fa-star-o" data-rating="4"></span>
    <span class="fa fa-star-o" data-rating="5"></span>
    <input type="hidden" name="whatever2" class="rating-value" value="1.9">
  </div>
</div>
</div>
   </div>

JQUERY

$('.abc').click(function(){
  var $star_rating = $(this).find('.star-rating .fa');



var SetRatingStar = function() {
 return $star_rating.each(function() {
if (parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))) {
  return $(this).removeClass('fa-star-o').addClass('fa-star');
 } else {
  return $(this).removeClass('fa-star').addClass('fa-star-o');
}
});
};

$star_rating.on('click', function() {
$star_rating.siblings('input.rating-value').val($(this).data('rating'));
return SetRatingStar();
});
});
SetRatingStar();

Answer 2

我建议将事件监听器绑定到 stars 父元素和事件委托：$star_rating.on('click', '.fa', function(){});

然后只在评级更改的实例上运行星级设置功能。

// Set the variable to the star container.
var $star_rating = $('.star-rating');

// This runs the setStars function below for each and every rating instance.
var SetRatingStar = function() {  
  $star_rating.each(setStars);
};


function setStars() {
  // We use $(this) to only run the code for the calling instance of 
  // $('.star-rating') rather than all

  // Use a var to store the current rating value.
  var ratingVal = parseInt( $(this).find('input.rating-value').val());
  // Clear all filled classes and add open class to all stars.
  $(this).children().removeClass('fa-star').addClass('fa-star-o');
  // While the i var is less than the total rating value, use eq(i) to add 
  // the filled class to the star
  for(var i = 0; i < ratingVal; i ++)
   $(this).children().eq(i).removeClass('fa-star-o').addClass('fa-star');  
}

$star_rating.on('click', '.fa', function() {  
        $(this).siblings('input.rating-value').val($(this).index() + 1);
        // Calls setStars function with $(this) value set to the parent container.
        setStars.call($(this).parent());
    });


$(document).ready(function() {
  SetRatingStar();
});

codepen 上的工作示例： CODEPEN EXAMPLE