如何合并多个JavaScript函数实现星级评分系统复用？

我在Windows 10的WAMP环境中搭建了本地视频画廊，每个视频缩略图搭配5星评分系统，用RateIt JavaScript模块实现，评分变更时会同步更新到MySQL数据库。目前单个缩略图的评分功能正常，但页面包含数百个缩略图，每个对应的JS代码重复度极高。尝试用函数传变量复用代码时总是失效，求解决办法。

核心解决思路 #

把所有重复的JS逻辑提取成通用函数，利用DOM结构的关联性（比如星级容器和结果展示span的层级关系）避免硬编码ID，同时用类选择器统一绑定事件，不再为每个元素单独生成重复代码。

步骤1：编写通用初始化脚本 #

创建单独的rating-script.js文件（或放到页面<head>标签内），内容如下：

// 通用提示文本，仅定义一次
const tooltipValues = ['delete', 'poor', 'ok', 'good', 'excellent'];

// 页面加载完成后统一初始化所有RateIt组件
$(document).ready(function() {
    // 绑定所有星级组件的hover提示事件
    $('.rateit').bind('over', function(event, value) {
        $(this).attr('title', tooltipValues[value - 1]);
    });

    // 绑定评分完成和重置事件
    $('.rateit').bind('rated reset', function(event) {
        const $ratingEl = $(this);
        const vidId = $ratingEl.attr('id');
        const currentRating = $ratingEl.rateit('value');
        
        // 找到当前星级对应的结果展示span（通过ID关联）
        const $resultSpan = $('#' + vidId + 'sid');

        // 根据事件类型更新提示文本
        if (event.type === 'rated') {
            $resultSpan.text('Rating saved ' + currentRating);
        } else if (event.type === 'reset') {
            $resultSpan.text('Rating reset');
        }

        // 发送AJAX更新数据库
        $.ajax({
            url: 'assets/includes/update_ratings.php',
            data: { IDvid: vidId, value: currentRating },
            type: 'POST'
        });
    });
});

步骤2：修改PHP生成HTML的逻辑 #

移除每个缩略图里的内嵌<script>，仅输出正确的DOM结构，通过data-rateit-value属性传递初始评分值（RateIt会自动读取该属性）：

<?php 
include_once 'assets/includes/media_header.php'; 
include_once 'assets/includes/dbConfig.php'; 

$query = "SELECT t1.*, t2.user_rating
            FROM xhtmlall t1
            LEFT JOIN star_ratings t2
            ON t1.IDvid = t2.IDvid
            WHERE page = '1' ORDER BY Idmstr";
$result = $conn->query($query);
$count = mysqli_num_rows($result);

if ($count > 0) { 
    echo $count . "<br>".PHP_EOL; 
    while($row = $result->fetch_assoc()) {
        // 处理空评分的默认值
        $initialRating = !empty($row['user_rating']) ? $row['user_rating'] : 0;
        
        echo '<div class="thumbContainer">'.PHP_EOL;
        echo '<button class="btn-thumb" id="pic'.$row['IDpic'].'" href="#M'.$row['IDdiv'].'"></button>'.PHP_EOL;
        echo '<div class="starContainer">'.PHP_EOL;
        // 通过data属性传递初始评分
        echo '<div class="rateit rateit-bg" id="'.$row['IDvid'].'" data-rateit-step="1" data-rateit-value="'.$initialRating.'"></div>'.PHP_EOL;
        // 修复hover元素的ID重复问题，改为class
        echo '<div><span id="'.$row['IDvid'].'sid"></span><span class="hover"></span></div>'.PHP_EOL;
        echo '</div></div>'.PHP_EOL;
    }
}
?>

步骤3：引入通用脚本 #

在页面的<head>或<body>末尾引入通用脚本：

<script src="path/to/rating-script.js"></script>

之前尝试失效的原因 #

1. 在rated/reset事件内重复绑定over/rated/reset事件，导致每次评分都会叠加绑定，引发逻辑混乱
2. 硬编码ID导致代码冗余，且容易出现拼写错误
3. 内嵌脚本会阻塞页面加载，同时生成大量重复代码

额外优化建议 #

• 给AJAX请求添加错误处理，提升用户体验：

$.ajax({
    url: 'assets/includes/update_ratings.php',
    data: { IDvid: vidId, value: currentRating },
    type: 'POST',
    error: function() {
        $resultSpan.text('Failed to save rating');
    }
});

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