PHP foreach循环中jQuery rateYo插件实现产品独立星级显示问题

问题根源 #

当前写法会在每个产品容器里重复初始化所有.ratYo元素，后续脚本会覆盖之前的星级设置，最终所有产品都显示最后一个的评级；同时重复绑定DOM ready事件也会导致执行逻辑混乱。

修正方案 #

1. 重构循环内的HTML结构
   循环里只生成星级容器，通过data-*属性存储当前产品的评级值，移除每个容器内的重复脚本：

<?php foreach($pro as $list): ?>
    <div style="left: -60px;position: relative;" class="ratYo" data-rating="<?php echo $list['averageRating'] ?>"></div>
<?php endforeach; ?>

2. 统一编写初始化脚本
   将初始化代码放在页面底部（或DOM加载完成后），遍历每个星级容器，读取自身的data-rating值单独初始化：

<script type='text/javascript'>
    $(function () {
        $(".ratYo").each(function() {
            var currentRating = $(this).data('rating');
            $(this).rateYo({
                rating: currentRating,
                starWidth: "20px",
                readOnly: true
            });
        });
    });
</script>

核心逻辑说明 #

• 用data-rating属性为每个星级容器绑定专属的评级数据，确保数据源唯一对应。
• 通过.each()遍历每个容器，单独执行初始化，避免批量操作导致的覆盖问题。
• 移除循环内的重复脚本，减少冗余代码与不必要的DOM事件绑定。

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