jQuery on/off事件实现：按钮切换页面背景色的开关功能问题

这里提供几种基于jQuery的解决方案，帮你完成点击按钮切换<p>元素背景色的需求：

方法1：用状态变量控制切换 #

定义一个变量记录当前背景色状态，每次点击按钮时切换状态并设置对应颜色：

$(function () {
    let isRed = false; // 初始状态：未启用红色背景
    $("#button").click(function () {
        isRed = !isRed; // 切换状态
        // 根据状态设置颜色，空值恢复元素原始背景色
        $("p").css("background-color", isRed ? "red" : "");
    });
});

方法2：用toggleClass（推荐） #

把样式逻辑放到CSS中，通过切换类来实现背景色变化，符合样式与行为分离的原则：
首先添加CSS类：

.red-bg {
    background-color: red;
}

然后修改JS代码：

$(function () {
    $("#button").click(function () {
        $("p").toggleClass("red-bg");
    });
});

这种方式更易维护，后续要修改颜色或其他样式，直接调整CSS即可，无需改动JS。

方法3：直接检查当前背景色（不推荐） #

通过判断当前元素的背景色来切换，但要注意不同浏览器返回的颜色格式可能不同（比如red或rgb(255, 0, 0)）：

$(function () {
    $("#button").click(function () {
        const currentBg = $("p").css("background-color");
        if (currentBg === "red" || currentBg === "rgb(255, 0, 0)") {
            $("p").css("background-color", "");
        } else {
            $("p").css("background-color", "red");
        }
    });
});

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