我正在尝试创建一个按钮，当单击该按钮时，背景位置会发生变化(我不想使用 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();">
最佳答案
我认为这里最好的建议是简单地使用像 .altPosition 这样的 CSS 类，并在您的 CSS 文件中定义差异。然后使用 toggleClass()像这样:
$(i).click(function () {
$(g).toggleClass("altPosition");
});
为了保存您的 cookie，您可以使用 $(g).is(".altPosition") 做一些事情来检测它处于哪个状态，以及 toggleClass() 可以将第二个参数作为 bool 值，用于打开或关闭读取您的 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;
}
关于javascript - 检查/更改背景位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6239459/