Question

我正在尝试按下一个按钮，当点击背景位置发生变化时（我不想使用CSS，因为我希望它坚持下去，而不是在点击时执行）。然后，当用户单击保存按钮时，它会检查背景位置以查看要保存（打开或关闭）的设置。我正在使用jQuery，从我在网上看到的看起来我看起来一切正常，但它不起作用，所以有些事情是不对的。这是代码：

function onoffButton(i, g)
{
    $(i).click(function () {
        if ($(g).css("backgroundPosition") == "0px -20px") {
            $(g).css("backgroundPosition", "0px 0px");
        } else {
            $(g).css("backgroundPosition", "0px -20px");
        }
    });
}

然后会被这样的事情调用：

onoffButton("#testswitchRating", "#faviconswitch");

然后检查它们以保存设置：

if ($("#ratingswitch").css("backgroundPosition") == "0px 0px") {
    createCookie('showRatings', 0,365);
}

if ($("#ratingswitch").css("backgroundPosition") == "0px -20px") {
    createCookie('showRatings', 1,365);
}

我在这里读cookie：

function checkSettings()
{
if (readCookie('showRatings') == 0) {
$('.rating').css('display', 'none');
$('#ratingswitch').css('background-position','0px 0px');
} else {
$('.rating').css('display', 'inline');
$('#ratingswitch').css('background-position','0px -20px');
}
}

然后我在这里打电话：

<body onload="checkSettings();">

Answer 1

我认为这里最好的建议是简单地使用像.altPosition这样的CSS类，并定义CSS文件中的差异。然后像这样使用toggleClass()：

$(i).click(function () {
    $(g).toggleClass("altPosition");
});

为了保存您的Cookie，您可以使用$(g).is(".altPosition")执行某些操作来检测它所处的状态，toggleClass()可以将第二个参数作为开启或关闭的布尔值来读取您的Cookie ：

// to write:
createCookie("showRatings", $("#ratingsswitch").is(".altPosition"), 365);
// and to read:
$("#ratingsswitch").toggleClass("altPosition", readcookie("showRatings"));

然后在你的CSS中：

#faviconswitch { 
    background-position: 0px 0px;
}
#faviconswitch.altPosition { 
    background-position: 0px -20px;
}

检查/更改背景位置

1 个答案: