带阵列的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）。知道我在这里缺少什么，或者这可以像这样使用吗？我将包含小提琴链接并使用下面的代码片段。谢谢你的帮助。

的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

问题在于您尝试更改已初始化的元素上的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>

Answer 2

使用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>