Javascript 如何将此脚本的设置保存在cookie中并使其依赖于另一个cookie？

我试着做一个按钮，一旦点击就切换网站背景。当然，设置需要保存在cookie中，这样才能保持不变

如何组合这两个脚本，以便在单击按钮后，它与背景保持切换？或者依赖于body类“clicked”

我找到了一种切换并将背景保存在cookie中的方法：

}))；

按钮从switch_on.png切换到switch_off.png，如下所示：

$(function(){
$(".toggle-swap").click(function() {
if ($(this).attr("class") == "toggle-swap") {
  this.src = this.src.replace("switch_on.png","switch_off.png");
} else {
  this.src = this.src.replace("switch_off.png","switch_on.png");
}
$(this).toggleClass("on");
});

}))；

我的按钮：

<div id="switch"><a href="#"><img class="toggle-swap" src="../img/switch_on.png" alt=""></a></div>

---

我会将其合并为一个函数，例如：

$(function() {
    // Create a variable for the current state
    var body_class;

    // Cache some elements
    var $body = $('body'), $switch = $('.toggle-swap');

    // Define a function that toggles background + button
    var toggleBodyClass = function(event) {
        // Toggle the images
        if (body_class) {
            $switch[0].src = $switch[0].src.replace("switch_off.png","switch_on.png");
            body_class = '';
        } else {
            $switch[0].src = $switch[0].src.replace("switch_on.png","switch_off.png");
            body_class = 'clicked';
        }

        // Toggle some css classes (body + button)
        $body.toggleClass('clicked');
        $switch.toggleClass('on');

        // Update the cookie
        $.cookie('body_class', body_class);

        // Prevent the browsers default behavior
        if (event) event.preventDefault();
    };

    // Set the initial state
    if ($.cookie('body_class')) {
        toggleBodyClass();
    }

    // Bind the event handler
    $switch.click(toggleBodyClass);
});

---

我会将其合并为一个函数，例如：

$(function() {
    // Create a variable for the current state
    var body_class;

    // Cache some elements
    var $body = $('body'), $switch = $('.toggle-swap');

    // Define a function that toggles background + button
    var toggleBodyClass = function(event) {
        // Toggle the images
        if (body_class) {
            $switch[0].src = $switch[0].src.replace("switch_off.png","switch_on.png");
            body_class = '';
        } else {
            $switch[0].src = $switch[0].src.replace("switch_on.png","switch_off.png");
            body_class = 'clicked';
        }

        // Toggle some css classes (body + button)
        $body.toggleClass('clicked');
        $switch.toggleClass('on');

        // Update the cookie
        $.cookie('body_class', body_class);

        // Prevent the browsers default behavior
        if (event) event.preventDefault();
    };

    // Set the initial state
    if ($.cookie('body_class')) {
        toggleBodyClass();
    }

    // Bind the event handler
    $switch.click(toggleBodyClass);
});

---

对不起，那不行。车身和按钮都没有任何作用。一定是出了什么事对不起，我的错。在某一点上使用了错误的选择器。请再试一次！（在这种情况下效果非常好）

$。jQuery中不会自动包含cookie

。你必须引用jQuery-plugin，它可以正常工作。您可以尝试：test.releaseedart.com（右下角的lil开关）当我第一次单击它时，它会更改背景，但不会更改开关，但在第二次单击时，两者都会更改。有时，当转到另一页时，即使背景没有改变，开关也会变回原来的位置。奇怪的此外，我不会通过css更改开关图像的外观，而只是通过更改图像。顺便说一句，该站点仍处于WIP状态，因此不必担心部件是否还不安静。我认为这只是以下几行：

$switch[0].src=$switch[0].src.replace（“switch_on.png”，“switch_off.png”）这仍然是错误的-您只需要交换它们，我已经更新了上面的代码来反映这一点。抱歉，但这不起作用。车身和按钮都没有任何作用。一定是出了什么事对不起，我的错。在某一点上使用了错误的选择器。请再试一次！（在这种情况下效果非常好）
$。jQuery中不会自动包含cookie
。你必须引用jQuery-plugin，它可以正常工作。您可以尝试：test.releaseedart.com（右下角的lil开关）当我第一次单击它时，它会更改背景，但不会更改开关，但在第二次单击时，两者都会更改。有时，当转到另一页时，即使背景没有改变，开关也会变回原来的位置。奇怪的此外，我不会通过css更改开关图像的外观，而只是通过更改图像。顺便说一句，该站点仍处于WIP状态，因此不必担心部件是否还不安静。我认为这只是以下几行：
$switch[0].src=$switch[0].src.replace（“switch_on.png”，“switch_off.png”）这仍然是错误的-您只需要交换它们，我已经更新了上面的代码来反映这一点。