javascript - 带数组的 RateYo 插件

Question

我正在开发一个带有一些星级评级的页面，并且为此使用了rateYo插件( http://rateyo.fundoocode.ninja )。如果我使用一星级，一切都会正常工作，但我需要在该页面上的众多实例中动态使用它，这些实例将从数据库获取产品数据。我最初的想法是使用类而不是 ID 来在页面上拥有多个类，并使用带有一些模拟数据的循环，如下所示:

var demoRatings = [3.5, 4, 2, 1.5, 5, 4.5, 2.5, 1],
    stars       = $('.rateYo');

for (var i = 0; i < stars.length; i++) {
  $('.rateYo').rateYo({
    halfStar: true,
    rating: demoRatings[i],
    readOnly: true
  });
};

虽然我在尝试此操作时没有遇到任何错误，并且它显示了所有评级部分，但它仅显示数组中第一项的星星 (3.5)。知道我在这里缺少什么或者是否可以像这样使用它？我将包含 fiddle 链接并使用下面的代码片段。谢谢大家的帮助。

jsfiddle:https://jsfiddle.net/m6fyem7e/5/

var demoRatings = [3.5, 4, 2],
    stars       = $('.rateYo');

for (var i = 0; i < stars.length; i++) {
  $('.rateYo').rateYo({
    halfStar: true,
    rating: demoRatings[i],
    readOnly: true
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>

<div class="item">
  <p class="product-name">product name</p>
  <div class="star-rating rateYo"></div>
  <p class="price">$100.00</p>
  <p class="starting-at">Starting at: <span>$50.00</span></p>
  <div class="add-to-cart">
    <button><i class="fa fa-shopping-cart" aria-hidden="true"></i>Add to Cart</button>
 </div>
</div>

<div class="item">
  <p class="product-name">product name</p>
  <div class="star-rating rateYo"></div>
  <p class="price">$100.00</p>
  <p class="starting-at">Starting at: <span>$50.00</span></p>
  <div class="add-to-cart">
    <button><i class="fa fa-shopping-cart" aria-hidden="true"></i>Add to Cart</button>
 </div>
</div>

<div class="item">
  <p class="product-name">product name</p>
  <div class="star-rating rateYo"></div>
  <p class="price">$100.00</p>
  <p class="starting-at">Starting at: <span>$50.00</span></p>
  <div class="add-to-cart">
    <button><i class="fa fa-shopping-cart" aria-hidden="true"></i>Add to Cart</button>
 </div>
</div>

Answer 1

使用 each from jQuery 的绝佳机会:

var demoRatings = [3.5, 4, 2],
  stars       = $('.rateYo');

stars.each(function(i) {
  $(this).rateYo({
    halfStar: true,
    rating: demoRatings[i],
    readOnly: true
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>

<div class="item">
  <p class="product-name">product name</p>
  <div class="star-rating rateYo"></div>
  <p class="price">$100.00</p>
  <p class="starting-at">Starting at: <span>$50.00</span></p>
  <div class="add-to-cart">
    <button><i class="fa fa-shopping-cart" aria-hidden="true"></i>Add to Cart</button>
 </div>
</div>

<div class="item">
  <p class="product-name">product name</p>
  <div class="star-rating rateYo"></div>
  <p class="price">$100.00</p>
  <p class="starting-at">Starting at: <span>$50.00</span></p>
  <div class="add-to-cart">
    <button><i class="fa fa-shopping-cart" aria-hidden="true"></i>Add to Cart</button>
 </div>
</div>

<div class="item">
  <p class="product-name">product name</p>
  <div class="star-rating rateYo"></div>
  <p class="price">$100.00</p>
  <p class="starting-at">Starting at: <span>$50.00</span></p>
  <div class="add-to-cart">
    <button><i class="fa fa-shopping-cart" aria-hidden="true"></i>Add to Cart</button>
 </div>
</div>