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，爲背景顏色而不是徽標圖像工作

回答

相關問題