javascript - RateYo插件与数组

我正在处理一个具有一些星级的页面，并且为此使用了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）。对我在这里缺少的内容有什么想法，或者是否可以这样使用？我将包括小提琴链接并在下面使用代码片段。感谢您的帮助。

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>

最佳答案

问题在于您试图更改已经初始化的元素上的RateYo设置。例如，如果您将代码更改为

for (var i = 0; i < stars.length; i++) {
  $('.rateYo').eq(i).rateYo({ // select by index as an example
    halfStar: true,
    rating: demoRatings[i],
    readOnly: true
  });
}

它会工作。

这是一个使用元素的data-属性的示例。

$('.rateYo').each(function() {
  $(this).rateYo({
    halfStar: true,
    rating: this.dataset.rating,
    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" data-rating='5'></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" data-rating='3'></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" data-rating='2.5'></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>

Rateyo

javascript - RateYo插件与数组