jQuery：每秒递增数字，点击div递减10的功能实现异常求助

看起来你的计数器自动递增功能已经正常工作，但点击#red-block的触发逻辑没达到预期对吧？我先帮你梳理下可能的问题点，再给出完整的修复代码~

可能的问题根源 #

1. 事件绑定时机/方式错误：如果你的代码在DOM未完全加载时执行，或者把点击事件绑定写在了setInterval循环里，会导致事件绑定失效或重复绑定（点击一次触发多次逻辑）。
2. 代码不完整：你贴的代码里jQuery('#red-block').cl...没写完，大概率是想绑定click事件，但写法有遗漏。
3. 数值同步缺失：点击后计数器减10，但没有手动更新显示的数值，导致页面上的数字不会立即变化。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #red-block {
            width: 100px;
            height: 100px;
            background: red;
            cursor: not-allowed;
            margin-top: 20px;
            transition: all 0.3s;
        }
        #red-block.clickable {
            cursor: pointer;
            opacity: 1;
        }
        #red-block.changed {
            background: green;
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div id="number">0</div>
    <div id="red-block"></div>

    <script>
        var counter = 0;
        var deductValue = 10; // 把你定义的increment改成更语义化的变量
        var numberDiv = document.getElementById('number');
        var redBlock = $('#red-block');

        // 计数器自动递增逻辑
        var interval = setInterval(function(){
            numberDiv.innerHTML = ++counter;
            // 数值≥10时，给红色区块添加可点击状态（视觉反馈）
            if (counter >= deductValue) {
                redBlock.addClass('clickable');
            }
        }, 1000);

        // 绑定点击事件（确保DOM加载完成后执行，这里放在body末尾就没问题）
        redBlock.on('click', function() {
            // 只有当数值达标时才执行逻辑
            if (counter >= deductValue) {
                // 红色区块的变化效果（这里用切换类的方式，方便扩展）
                $(this).toggleClass('changed');
                // 计数器减10
                counter -= deductValue;
                // 立即同步页面上的数字
                numberDiv.innerHTML = counter;
                // 如果数值回到10以下，移除可点击状态
                if (counter < deductValue) {
                    redBlock.removeClass('clickable changed');
                }
            }
        });
    </script>
</body>
</html>

关键修复点说明 #

• 事件绑定优化：把点击事件绑定放在setInterval外面，避免重复绑定；同时放在DOM元素之后，确保绑定有效。
• 视觉反馈增强：给#red-block添加clickable类，让用户直观知道什么时候可以点击，提升交互体验。
• 数值同步：点击减10后手动更新numberDiv.innerHTML，确保页面数字立即变化。
• 语义化变量：把increment改成deductValue，让代码更易读，后续修改数值也更方便。

如果你的#red-block是动态生成的（比如通过JS后来添加到页面的），可以改用事件委托的方式绑定点击事件：

// 事件委托写法，兼容动态生成的元素
$(document).on('click', '#red-block', function() {
    // 逻辑和上面一致
});

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