使用jQuery实现多倒计时功能遇阻，寻求技术协助

看起来你的多倒计时功能没能正常运行，主要是因为几个关键的代码缺失和逻辑问题，我来帮你一步步排查并修复：

问题分析 #

• 缺少startCountdown核心函数：你只调用了这个函数，但没有实现它的具体逻辑，这是倒计时不显示的最主要原因
• 定时器变量全局化冲突：多个倒计时共用一个countdown变量，会导致定时器互相覆盖，无法独立运行
• 动态元素事件绑定失效：通过AJAX重新加载HTML后，新生成的按钮不会绑定点击事件
• 未定义变量与无效参数：ligne变量没定义，startCountdown()调用时没传目标元素，AJAX请求的参数也有问题

修复后的完整代码 #

HTML部分（保持你的结构不变） #

<tr data-tempsctrl="0:00:35" class="color"> 
    <td width="200px"><div class="countdown"></div></td> 
    <td width="150px">
        <button data-idctrl="50" data-result="ok" class="restartcount"> Conforme</button> 
        <button data-idctrl="1" data-result="nok" class="restartnc"> non Conforme</button>
    </td> 
</tr> 
<tr data-tempsctrl="0:00:55" class="color"> 
    <td width="200px"><div class="countdown"></div></td> 
    <td width="150px">
        <button data-idctrl="50" data-result="ok" class="restartcount"> Conforme</button> 
        <button data-idctrl="1" data-result="nok" class="restartnc"> non Conforme</button>
    </td> 
</tr> 
<tr data-tempsctrl="0:01:35" class="color"> 
    <td width="200px"><div class="countdown"></div></td> 
    <td width="150px">
        <button data-idctrl="50" data-result="ok" class="restartcount"> Conforme</button> 
        <button data-idctrl="1" data-result="nok" class="restartnc"> non Conforme</button>
    </td> 
</tr>
<div class="acfreq" id="acfreq"></div>

JavaScript部分（修复并完善逻辑） #

$(document).ready(function(){
    // 初始化所有倒计时
    initCountdowns();

    // 使用事件委托处理动态生成的按钮（解决AJAX加载后事件失效问题）
    $(document).on('click', '.restartcount', function(){
        var $btn = $(this);
        var action = "envoi";
        // 示例：从按钮的data-idctrl获取ligne，你可以根据实际业务调整变量来源
        var ligne = $btn.data('idctrl'); 
        
        $.ajax({
            type:'POST',
            url:'LoadCtrlfreq2.php',
            data: {
                action: action,
                ligne: ligne
            },
            success:function(html){
                $('#acfreq').fadeIn("slow").html(html);
                // 重新初始化新加载的倒计时
                initCountdowns();
            }
        });

        // 重置当前行的倒计时
        var $tr = $btn.closest('tr');
        resetCountdown($tr);
    });

    // 初始化所有带data-tempsctrl的元素的倒计时
    function initCountdowns() {
        $('[data-tempsctrl]').each(function() {
            startCountdown($(this));
        });
    }

    // 开始倒计时的核心函数
    function startCountdown($tr) {
        // 清除当前行已有的定时器（避免重复启动）
        if ($tr.data('timer')) {
            clearInterval($tr.data('timer'));
        }

        // 解析data-tempsctrl的时间格式：h:m:s
        var timeParts = $tr.data('tempsctrl').split(':');
        var totalSeconds = parseInt(timeParts[0]) * 3600 + parseInt(timeParts[1]) * 60 + parseInt(timeParts[2]);
        var $countdownDiv = $tr.find('.countdown');

        // 更新倒计时显示
        function updateCountdown() {
            var hours = Math.floor(totalSeconds / 3600);
            var minutes = Math.floor((totalSeconds % 3600) / 60);
            var seconds = totalSeconds % 60;

            // 格式化数字为两位
            hours = hours.toString().padStart(2, '0');
            minutes = minutes.toString().padStart(2, '0');
            seconds = seconds.toString().padStart(2, '0');

            $countdownDiv.text(`${hours}:${minutes}:${seconds}`);

            if (totalSeconds <= 0) {
                clearInterval($tr.data('timer'));
                $countdownDiv.text('倒计时结束');
                // 可自定义倒计时结束后的逻辑，比如添加样式类
                $tr.addClass('countdown-ended');
            } else {
                totalSeconds--;
            }
        }

        // 立即执行一次更新，避免延迟显示
        updateCountdown();
        // 启动定时器，每秒更新一次，并把定时器保存到元素的data属性中
        var timer = setInterval(updateCountdown, 1000);
        $tr.data('timer', timer);
    }

    // 重置指定行的倒计时
    function resetCountdown($tr) {
        startCountdown($tr);
    }
});

关键修复点说明 #

1. 添加startCountdown核心实现：解析data-tempsctrl的时间格式，计算总秒数，每秒更新倒计时显示，并处理结束逻辑
2. 每个元素独立保存定时器：把定时器对象存储在元素的data-timer属性中，避免多个倒计时互相干扰
3. 事件委托处理动态元素：使用$(document).on('click', '.restartcount', ...)代替直接绑定，确保AJAX加载后的新按钮也能触发事件
4. 修复AJAX请求参数：使用对象格式传递参数，定义ligne变量（示例从按钮的data-idctrl获取，你可以根据实际业务调整）
5. 重新初始化动态加载的倒计时：AJAX成功后调用initCountdowns()，重新为新加载的行绑定倒计时
6. 添加重置逻辑：点击按钮时重置当前行的倒计时，而不是全局清除

你可以根据自己的业务需求调整倒计时结束后的样式或逻辑（比如countdown-ended类的样式），这样应该就能让多倒计时功能正常运行了。

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