通过检查cookie动态更改jQuery“悬停”

时间:2013-10-24 21:18:57

标签: javascript jquery css jquery-ui cookies

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

2 个答案:

答案 0 :(得分:0)

嗯,你只检查过一次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。但是,我不会推荐它,因为对于你正在尝试做的事情来说,这似乎是一种巨大的矫枉过正,但它是一种选择。

答案 1 :(得分:0)

我认为如果不重新加载页面,您将无法获得更新的Cookie。而不是尝试单独检查cookie以设置cookie,您可以运行使用cookie设置javascript开关的javascript。