通过检查cookie动态改变jQuery“悬停”答案

【问题标题】：Dynamically change jQuery "hover" by checking cookie通过检查cookie动态改变jQuery“悬停”
【发布时间】：2013-11-03 19:19:33
【问题描述】：

如何通过检查用户 cookie 来更改 jQuery .hover() 中的函数？

现在代码在网站首次加载时有效，但是当 cookie 更新（通过 javascript）时，.hover() 不会切换，除非重新加载页面：

    var SkinChk = getCookie('skincookie');

    $('.fadeMenu').hover(function(){
        if (SkinChk == 'Alternative') {
            // Alternative Skin
            $(this).stop().animate({ backgroundColor:'rgb(66, 137,170)', color:'#F7F9F4'},500);
        } else {
            // Default Skin
            $(this).stop().animate({ backgroundColor:'rgb(255,165,0)', color:'#FFFFFF'},500);
        }
    }, function(){
        if (SkinChk == 'Alternative') {
            // Alternative Skin
            $(this).stop().animate({ backgroundColor:'rgb(247, 249, 244)', color:'#1F262A'},500);
        } else {
            // Default Skin
            $(this).stop().animate({ backgroundColor:'rgb(201,224,179)', color:'#333333'},500);
        }
    });

var SkinChk = getCookie('skincookie'); 引用了一个有效的 javascript 函数，为了简洁起见，我没有发布。它返回 cookie 值。

【问题讨论】：

你应该添加getCookie()的代码

标签： javascript jquery css jquery-ui cookies

【解决方案1】：

我认为如果不重新加载页面，您将无法获得更新的 cookie。您可以运行 javascript 来切换 WITH cookie 设置 javascript，而不是尝试与设置 cookie 分开检查 cookie。

【讨论】：

【解决方案2】：

好吧，您只检查 cookie 一次，所以没有什么可以告诉函数更新 SkinChk 变量。

解决这个问题的最简单方法是将 cookie 检查移动到悬停函数中：

var SkinChk;    

$('.fadeMenu').hover(function(){
    //Check if the cookie has changed
    SkinChk = getCookie('skincookie');
    if (SkinChk == 'Alternative') {
        // Alternative Skin
        $(this).stop().animate({ backgroundColor:'rgb(66, 137,170)', color:'#F7F9F4'},500);
    } else {
        // Default Skin
        $(this).stop().animate({ backgroundColor:'rgb(255,165,0)', color:'#FFFFFF'},500);
    }
}, function(){
    //Check if cookie has changed
    SkinChk = getCookie('skincookie');
    if (SkinChk == 'Alternative') {
        // Alternative Skin
        $(this).stop().animate({ backgroundColor:'rgb(247, 249, 244)', color:'#1F262A'},500);
    } else {
        // Default Skin
        $(this).stop().animate({ backgroundColor:'rgb(201,224,179)', color:'#333333'},500);
    }
});

您还可以创建一个事件来侦听监视 cookie 的服务。查看nsICookieService。不过，我不会推荐它，因为对于您正在尝试做的事情来说，这似乎有点过头了，但这是一种选择。

【讨论】：

我知道这是一个简单的疏忽。我在想通过调用变量它会重新定义变量，因此再次调用该函数。但当然不是这样。