根据 cookie 值切换图像答案

【问题标题】：Toggle image based on cookie value根据 cookie 值切换图像
【发布时间】：2010-05-06 11:28:15
【问题描述】：

我使用几个 JS 函数来设置一个名为 'visible' 的 cookie，其值为 yes 或 no。

基本上我使用这些值来决定<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('可见','不'); } 别的 { delete_cookie('可见'); } $(".help").slideToggle(); $("#wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() { $("#slider img").toggle(); }); });

所以 .toggle() 不再匹配 <div> 的状态

当 cookie 值 = no 时，show.png 应该是可见的

当 cookie 值 = yes 时，hide.png 应该是可见的

谁能建议我如何修改这个？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

为了方便起见，我只是没有删除 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();
        }

        }
    };

【讨论】：

【解决方案2】：

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

【讨论】：