Question

我使用一些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（ '可见'， '无'）; } 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应该是可见的

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

Answer 1

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

Answer 2

为了简化操作，我只是没有删除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();
        }

        }
    };

根据cookie值切换图像

2 个答案: