点击切换data-theme值异常：点击任意区域均触发主题切换的问题求助

你的jQuery代码核心错误是**$(document).ready()的用法完全搞错了**，导致点击事件被错误绑定到了整个document对象上，所以页面任意区域点击都会触发主题切换。

错误原因详解 #

$(document).ready()的正确用法是传入一个回调函数，当DOM加载完成后执行这个函数里的代码。你把选择器#toggle_checkbox直接作为参数传给ready()，这不符合jQuery的API规范——这种写法相当于把事件绑定到了document上，而不是目标复选框。

修正后的代码 #

JavaScript 代码

// 标准写法
$(document).ready(function() {
    $('#toggle_checkbox').click(function() {
        const currentTheme = $('body').attr('data-theme');
        $('body').attr('data-theme', currentTheme === 'light' ? 'dark' : 'light');
    });
});

// 或者更简洁的简写形式（效果完全一致）
$(function() {
    $('#toggle_checkbox').on('click', function() {
        $('body').attr('data-theme', $('body').attr('data-theme') === 'light' ? 'dark' : 'light');
    });
});

优化后的HTML代码（去掉无用属性）

<body data-theme="light">
    <input type="checkbox" id="toggle_checkbox">
    <label for="toggle_checkbox">
        <div id="star">
            <div class="star" id="star-1"></div>
        </div>
    </label>
</body>

额外说明 #

因为你的label标签通过for="toggle_checkbox"和复选框做了关联，所以点击label也会自动触发复选框的click事件，修正后的代码会同时响应复选框和label的点击，不需要额外给label绑定事件，之前label上的空onclick=""属性可以直接删掉。

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