Question

我做了这个循环，将一个星形值添加到评论部分。它使用自定义数据值来保存所需的星数。

“i”标签指的是Font Awesome。

HTML：

<div class="owl-item">
    <div class="reviewStars" data-starCount="5"></div>
</div>
<div class="owl-item">
    <div class="reviewStars" data-starCount="4"></div>
</div>

JS

$('.owl-item div.reviewStars').each(function(){
    i = 0;
    while(i < $(this).attr('data-starCount')){
        $(this).append('<i class="fa fa-star">');
        i++
    };
});

这很有效，但如果评论者留下4.5星，我希望最后一颗星成为这个标记：

<i class="fa fa-star-half">

我不确定实现这一目标的最佳方法是什么。

感谢您的帮助！

Answer 1

你可以做你现在正在做的事情。 4.5，它应该添加4星。在while循环之后，执行：

if ($(this).attr('data-starCount') % 1 !== 0) {
  $(this).append('<i class="fa fa-star-half">');
}

如果数字％1不等于零，则表示它不是整数。在这种情况下，只需添加半星。此外，您可能希望将attr存储在变量中，这样您就不必一直定位它。

Answer 2

你可以做的一个简单的补充是检查数字的模数，如果它不是0，那么（假设评级是整数或半星），必须有一个半星给出

$('.owl-item div.reviewStars').each(function(){
    i = 0;
    while(i < $(this).attr('data-starCount')){
        $(this).append('<i class="fa fa-star">');
        i++
    };

    // Check for and add a half star
    if ($(this).attr('data-starCount') % 1 !== 0) {
        $(this).append('<i class="fa fa-star-half">');
    }
});

我个人不会以这种方式建立星星，但为了回答你的问题，你去了：）

Answer 3

许多工作答案，但保持代码可读和高效是值得的。我们不需要在元素周围创建一个jQuery包装器6次，我们可以从追加操作中分解HTML的生成，这使得我更容易阅读

$('.owl-item div.reviewStars').each(function () {
  var $this = $(this);
  var star = '<i class="fa fa-star">';
  var halfStar = '<i class="fa fa-star-half">';
  var rating = $this.attr('data-starCount');

  while (rating-- > 0) {
      content += star;
  }
  if (rating >= 0.5) {
    content += halfStar;
  }

  $this.append(content);
});

while循环用于在评论部分呈现星形值

3 个答案: