Question

大家。我使用的是简单的星级评分系统，我在页面上使用了3次。当我单击一个时，另外2个采用相同的值。需要使js适用于每一个。请善待，我是js的菜鸟。提前谢谢。

HTML

<div class="star-rating" id="star-rating-2"> 
  <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="rating-stars" class="rating-value" value="1">
</div>

的JavaScript

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();

Answer 1

我猜你正在看这样的事情，请检查 http://jsfiddle.net/unb3n8s1/3/，你需要找到父元素并仅在他的孩子身上循环

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

var SetRatingStar = function($star_rating_parent) {
  return $star_rating_parent.find('.fa').each(function() {
    if (parseInt($star_rating_parent.find('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() {
  $(this).siblings('input.rating-value').val($(this).data('rating'));
  return SetRatingStar($(this).parent());
});

Answer 2

我只更改了jquery的一行，这似乎正常运行。 Click事件存储您尝试访问的直接dom对象，尝试使用隐藏而不是文本输入：

＆＃13;

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 () {
    $(this).parent().find('input').val($(this).data('rating')); // <- edited line
    return SetRatingStar();
});

SetRatingStar();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="star-rating" id="star-rating-2"> <span class="fa fa-star-o" data-rating="1">1</span>
 <span class="fa fa-star-o" data-rating="2">2</span>
 <span class="fa fa-star-o" data-rating="3">3</span>
 <span class="fa fa-star-o" data-rating="4">4</span>
 <span class="fa fa-star-o" data-rating="5">5</span>

    <input type="text" name="rating-stars" class="rating-value" value="1" />
</div>
<div class="star-rating" id="star-rating-2"> <span class="fa fa-star-o" data-rating="1">1</span>
 <span class="fa fa-star-o" data-rating="2">2</span>
 <span class="fa fa-star-o" data-rating="3">3</span>
 <span class="fa fa-star-o" data-rating="4">4</span>
 <span class="fa fa-star-o" data-rating="5">5</span>

    <input type="text" name="rating-stars" class="rating-value" value="1" />
</div>
<div class="star-rating" id="star-rating-2"> <span class="fa fa-star-o" data-rating="1">1</span>
 <span class="fa fa-star-o" data-rating="2">2</span>
 <span class="fa fa-star-o" data-rating="3">3</span>
 <span class="fa fa-star-o" data-rating="4">4</span>
 <span class="fa fa-star-o" data-rating="5">5</span>

    <input type="text" name="rating-stars" class="rating-value" value="1" />
</div>

＆＃13;

需要让js在星级评定系统中多次工作，引导程序

2 个答案: