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

I'm trying to make a button, to switch the site background once clicked. And of course the setting needs to be saved in a cookie, for it to stick.

我正在尝试创建一个按钮，一旦点击就切换网站背景。当然，设置需要保存在cookie中，以便坚持下去。

How can I combine the two scripts, so that once the button is clicked, it stays switched, with the background? Or is dependend on the body class 'clicked'?

如何组合这两个脚本，以便一旦单击按钮，它将保持切换状态，具有背景？或者取决于身体类'点击'？

I found a way to switch and save the background in a cookie:

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

$(document).ready(function() {
var body_class = $.cookie('body_class');
if(body_class) {
    $('body').attr('class', body_class);
}
$("#switch").click(function() {
    $("body").toggleClass('clicked');
    $.cookie('body_class', $('body').attr('class'));
});

});

}）;

And the button is switched from switch_on.png to switch_off.png with this:

然后按钮从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");
});

});

}）;

My button:

我的按钮：

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

1 个解决方案

#1

I'd combine that into one function, e.g. like this:

我将它组合成一个函数，例如喜欢这个：

$(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);
});