jQuery评分脚本分页第二页异常：显示10星而非5星求助

首先直接回应你的疑问：没错，这大概率是因为第二页的动态加载元素没有被正确初始化raty插件，不过结合你提到的“第二页显示10星”这个特殊现象，我们还要排查下细节：

为什么会出现这个问题？ #

你现在的写法是给每个课程单独嵌入一段初始化脚本，页面首次加载第一页时，这些脚本能立刻找到对应的DOM元素，正常渲染5星评分。但切换到第二页时，常见的问题场景有两种：

1. 动态加载的脚本未执行：如果你的分页是通过AJAX加载第二页HTML，浏览器通常不会自动执行新插入的<script>标签，导致第二页的评分元素根本没被raty初始化。不过这种情况应该是空白才对，你看到的10星可能是另一种情况——
2. 重复初始化/score值错误：如果你的分页是重新渲染整个列表，却没清理之前的raty实例，或者后端在第二页返回的$r值是10（而raty默认最多显示5星，超出的话会直接拉满5星，但可能你的样式或者DOM重复导致视觉上看起来是10星）。

怎么解决？ #

别再给每个课程单独写脚本了，改成统一初始化的方式，既能避免分页问题，也更易维护：

步骤1：修改HTML结构 #

给所有评分元素加一个统一的类名，把评分值和课程ID存在data-*属性里：

<div class="ft-item">
  <div class="course-rating" data-score="<?php echo $r;?>" data-course-id="<?php echo $row->courseId;?>"></div>
</div>

步骤2：统一初始化脚本 #

把raty的初始化逻辑抽成一个函数，在页面加载完成后执行，分页切换后也能重复调用：

// 页面加载完成后初始化第一页评分
$(document).ready(function() {
  initCourseRatings();
});

// 封装初始化函数
function initCourseRatings() {
  $('.course-rating').raty({
    starOff : '<?php echo base_url()?>public/images/star/icon-star-2.png',
    starOn : '<?php echo base_url()?>public/images/star/icon-star-1.png',
    starHalf: '<?php echo base_url()?>public/images/star/icon-star-3.png',
    readOnly : true,
    half : true,
    // 从data属性读取当前元素的评分值，避免硬编码
    score: function() {
      return $(this).data('score');
    },
    space : true
  });
}

步骤3：分页后重新初始化 #

如果是AJAX分页，在新内容插入DOM后调用初始化函数：

// 举个分页按钮的例子，根据你的实际分页逻辑调整
$('.pagination-link').click(function(e) {
  e.preventDefault();
  const pageUrl = $(this).attr('href');
  
  $.get(pageUrl, function(html) {
    // 把新的课程列表替换到容器里
    $('#course-list').html(html);
    // 重新初始化第二页的评分
    initCourseRatings();
  });
});

额外排查点 #

• 检查第二页的$r值：查看第二页HTML里的data-score，确认是不是在0-5之间（raty默认最大是5星），如果$r是10，raty会直接显示5星全满，可能你视觉上误以为是10星；
• 清理旧DOM：如果分页时没有清空之前的课程列表，旧的评分元素没被移除，新的又加进来，可能会出现星星重复的情况。

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