javascript - 通过检查cookie动态改变jQuery "hover"

Question

如何通过检查用户 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 值。

Answer 1

好吧，您只检查 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 .不过，我不会推荐它，因为对于您要尝试做的事情来说，这似乎有点矫枉过正，但这是一个选择。