如何使用While循环渲染评论区星级？附实现代码示例

嘿，我刚搞定了评论区动态星级的功能，用自定义data属性来存储每个评论的星级数，配合jQuery和Font Awesome实现了这个需求，分享下我的实现思路和完整代码：

HTML结构 #

首先在每个评论项（.owl-item）里，我添加了一个.reviewStars容器，用data-starCount这个自定义属性来指定该评论对应的星级数量：

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

JavaScript实现逻辑 #

接下来用jQuery遍历所有.reviewStars容器，根据它的data-starCount值循环插入Font Awesome的星级图标（这里我补全了你代码里的<i>标签内容，你可以根据自己用的Font Awesome版本调整图标类名）：

$('.owl-item div.reviewStars').each(function() {
  let i = 0;
  // 把data属性值转成数字类型，避免字符串比较的潜在问题
  const starCount = parseInt($(this).attr('data-starCount'), 10);
  while(i < starCount) {
    // 插入实心星级图标，你也可以换成半星/空星的类名来实现半星评分
    $(this).append('<i class="fa-solid fa-star"></i>');
    i++;
  }
});

几个小提示 #

• 一定要提前引入Font Awesome库，否则图标会显示不出来
• 可以给星级图标加些CSS样式，比如设置color: #ffc107（金色）、调整字体大小，让星级看起来更贴合你的页面风格
• 把data-starCount的属性值转成数字是个严谨的做法，避免因为字符串类型的比较导致逻辑错误（比如虽然"5" > 4能运行，但用parseInt处理后更可靠）

内容的提问来源于stack exchange，提问作者Jacob Baker