Django循环渲染评论评分星标仅显示首个，求解决方法

你遇到的核心问题是重复使用了唯一标识符id——DOM中id必须唯一，document.getElementById()只会返回第一个匹配的元素，同时你的JS代码只执行了一次，没有遍历所有评论项，导致只有第一个评论显示星标。

下面提供两种可行的解决方案：

方案1：直接用Django模板渲染星标（推荐，无需JS） #

既然已经在Django模板环境中，完全可以跳过前端JS，直接通过模板逻辑生成星标，更高效也更简洁：

{% for review in reviews %}
  <p>display of numbers </p>
  <div class="staz">
    <p>{% for _ in "x"|rjust:review.rating %}★{% endfor %}</p>
  </div>
{% endfor %}

原理：利用Django的rjust过滤器，根据评分生成对应长度的占位字符串，再循环输出星标，直接在后端完成渲染，不需要前端额外处理。

方案2：修改HTML和JS，遍历所有评论项 #

如果一定要用JS处理，需要把重复的id替换为class，并遍历所有评论元素：

修改后的HTML #

{% for review in reviews %}
  <p>display of numbers </p>
  <!-- 用data属性存储评分，避免重复id -->
  <div class="staz" data-rating="{{ review.rating }}">
    <p class="demo"></p>
  </div>
{% endfor %}

修改后的JavaScript #

<script>
  // 获取所有星标容器
  const starContainers = document.querySelectorAll('.staz');
  
  starContainers.forEach(container => {
    const rating = parseInt(container.dataset.rating);
    let stars = '';
    // 循环生成对应数量的星标，比多分支if更简洁
    for(let i = 0; i < rating; i++){
      stars += '★';
    }
    // 给当前容器内的星标元素赋值
    container.querySelector('.demo').textContent = stars;
  });
</script>

说明：

• 用data-rating属性存储每个评论的评分，避免DOM中出现重复id
• 用querySelectorAll获取所有星标容器，遍历处理每个评论项
• 用循环生成星标，比多个if-else分支更易维护

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