1

JQueryCookieを使用して背景の色を変更しています。同時にロゴ画像も変更しますが、ページのリロード時に、Cookieを取得してロゴ画像を保持する方法を見つけようとしています。これまでのところ、私はCookieを使用するバックグラウンドを持っていますが、選択したテーマのロゴ画像を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を設定し、ロゴ画像にも同じことをしようとしています。クリックで画像を置き換えるまでは機能しますが、ページのリロード時にCookieを正しく設定できません。

ここにフィドルがあります。

4

2 に答える 2

2

これを試してみてください...

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-20T15:40:44.497 に答える
1 
if ($.cookie('mycookie')) {
    $('.main').addClass($.cookie('mycookie'));
    //-- set image src/class via $.cookie('mycookieimg') value
}

img属性がどこに設定されているのかわかりません。また、透明なPNGを使用して、画像全体にdivの背景を表示してみませんか？

于 2012-11-20T15:53:03.353 に答える