带数组的 RateYo 插件

Question

我正在处理一个有一些星级评分的页面，为此我正在使用 rateYo 插件 (http://rateyo.fundoocode.ninja)。如果我使用一个星级，一切都很好，但我需要动态地使用它与此页面上的许多实例一起使用，这些实例将从数据库中获取产品数据。我最初的想法是使用类而不是 ID 在页面上有多个 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 link 并使用下面的代码片段。感谢大家的帮助。

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">0.00</p>
  <p class="starting-at">Starting at: <span>.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">0.00</p>
  <p class="starting-at">Starting at: <span>.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">0.00</p>
  <p class="starting-at">Starting at: <span>.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">0.00</p>
  <p class="starting-at">Starting at: <span>.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">0.00</p>
  <p class="starting-at">Starting at: <span>.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">0.00</p>
  <p class="starting-at">Starting at: <span>.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">0.00</p>
  <p class="starting-at">Starting at: <span>.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">0.00</p>
  <p class="starting-at">Starting at: <span>.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">0.00</p>
  <p class="starting-at">Starting at: <span>.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 插件

RateYo plugin with array

javascript

jquery

rateyo