Jquery cookie，为背景颜色而不是徽标图像工作

我正在使用JQuery cookie来更改背景的颜色。我也同时更换徽标图片，但在页面重新加载时，我仍在试图弄清楚如何让cookie保留徽标图片。到目前为止，我的背景是使用cookie，但一直未能弄清楚如何使用cookie保留选定的主题标识图像。Jquery cookie，为背景颜色而不是徽标图像工作

到目前为止我的代码是：

<div class="main bg1"> 
<img id="logo-img" class="green-img" src="http://i1294.photobucket.com/albums/b601/danomatic11/logo-green.png" alt="logo"/> 
<h2>Lorem ipsum dolor sit</h2> 
</div> 

<p>Choose a theme:</p> 
<ul class="theme-switcher"> 
<li class="green">&nbsp;</li> 
<li class="purple">&nbsp;</li> 
<li class="rust">&nbsp;</li> 
</ul> 

$("li.green").click(function(){ $ 
(".main").removeClass('bg2 , bg3').addClass("bg1"); 
$('#logo-img').attr('src', 'http://i1294.photobucket.com/albums/b601/danomatic11/logo-green.png'); 
$.cookie('mycookie','bg1'); 
$.cookie('mycookieimg','green-img'); 
});

等等

正如你可以看到我设置的背景颜色的饼干当<li>被点击，并重新加载页面和我试图为一个标志图像做同样的事情。它的工作原理是点击替换图片，但我无法让Cookie在页面重新加载时正确设置。

I have a Fiddle here.

来源

2012-11-20 Danny Englander

尝试了这一点....

JSfiddle

$(document).ready(function(){ 

/* 
On click the theme is changed for the image and the logo. So far I have JQuery cookie working to keep the background color that was selected even after page reload. 

To do: retain the selected theme logo using coookie. 
*/ 


    $("li.green").click(function(){ $ 
     (".main").removeClass('bg2 , bg3').addClass("bg1"); 
     $('#logo-img').attr('src', 'http://i1294.photobucket.com/albums/b601/danomatic11/logo-green.png'); 
     $.cookie('mycookie','bg1'); 
     $.cookie('mycookieimg','logo-green'); 
    }); 

    $("li.purple").click(function(){ $ 
     (".main").removeClass("bg1 , bg3").addClass("bg2"); 
     $('#logo-img').attr('src', 'http://i1294.photobucket.com/albums/b601/danomatic11/logo-purple.png'); 
     $.cookie('mycookie','bg2'); 
     $.cookie('mycookieimg','logo-purple'); 
    }); 

    $("li.rust").click(function(){ $ 
     (".main").removeClass("bg1 , bg2").addClass("bg3"); 
     $('#logo-img').attr('src', 'http://i1294.photobucket.com/albums/b601/danomatic11/logo-rust.png'); 
     $.cookie('mycookie','bg3'); 
     $.cookie('mycookieimg','logo-rust'); 
    }); 

    if ($.cookie('mycookie')) { 
     var $imgsrc = $.cookie('mycookieimg'); 
     $('.main').addClass($.cookie('mycookie')); 
     $('#logo-img').attr('src','http://i1294.photobucket.com/albums/b601/danomatic11/'+$imgsrc+'.png'); 
    } 

});

来源

2012-11-20 15:40:44 chris

是的，这工作！我看到我现在做了什么，我没有在最后宣布。 –

再试一次，抱歉我更新了我的答案，因为有错误。 – chris

if ($.cookie('mycookie')) { 
    $('.main').addClass($.cookie('mycookie')); 
    //-- set image src/class via $.cookie('mycookieimg') value 
}

我没有看到那里的IMG属性正试图进行设置。另外，为什么不使用透明的PNG，并通过图像显示div的背景？

来源

2012-11-20 15:53:03

这里很难给出一个现实的代码表示，但是标识是一个不透明的实体图像，否则你的想法本来就不错。谢谢。 –

啊，在这种情况下，克里斯的解决方案是现货。 +1那个人！ –

Jquery cookie，为背景颜色而不是徽标图像工作

回答

相关问题