根据cookie值切换图像

时间:2010-05-06 11:28:15

标签: javascript jquery

我使用一些JS函数来设置名为'visible'的cookie,其值为yesno

基本上我使用这些值来决定<div>是可见还是隐藏。

我刚刚添加了cookie,之前我一直使用两张图片1.显示2.隐藏按钮隐藏并显示<div>,如下所示:

HTML:

<img class="show" title="Show" alt="Show" src="images/show.png" />
<img class="hide" title="Hide" alt="Hide" src="images/hide.png" />

JQUERY:

  $("#tool").click(function() {
$(".help").slideToggle();
    $("#wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() {
     $("#tool img").toggle();
    });
  });

但是我现在已经将Cookie添加到了混合中:

$(“#tool”)。click(function(){   if(get_cookie('visible')== null){     set_cookie( '可见', '无');   } else {     delete_cookie( '可见');   }   $( “帮助”)的slideToggle()。   $(“#wrapper”)。animate({opacity:1.0},200).slideToggle(200,function(){     $(“#slider img”)。toggle();   }); });

因此.toggle()不再匹配<div>

的状态

当Cookie值= no时,show.png应该可见

当Cookie值= yes时,hide.png应该是可见的

有谁能建议我如何推荐这个?

2 个答案:

答案 0 :(得分:0)

document.getElementsByClassName('show')[0].src = get_cookie('visible') ? 'images/hide.png' : 'images/show.png';

答案 1 :(得分:0)

为了简化操作,我只是没有删除cookie。只需每次都设置它。

$("#tool").click(function () {
    var cookie = get_cookie('visible');
    if (cookie == null) {
        set_cookie('visible', 'no');
        cookie = get_cookie('visible');
    }
    if (cookie.value == 'yes') {
        set_cookie('visible', 'yes');
        $(".help").slideDown();
        $("#wrapper").animate({
            opacity: 1.0
        }, 200).slideDown(200, function () {
            $("#tool img").show();
        });

    } else {
        set_cookie('visible', 'no');
        $(".help").slideUp();
        $("#wrapper").animate({
            opacity: 1.0
        }, 200).slideUp(200, function () {
            $("#tool img").hide();
        }

        }
    };