Question

我正在尝试通过设置cookie来使showHide在页面加载中持续存在。我的问题是我有多个div来解释。如何才能做到这一点？我尝试过使用or运算符，即：

var closed = $(".Div1").is(":hidden") || $(".Div2").is(":hidden");
        if (closed)
            $(".Div1").show() || $(".Div2").show();
        else
            $(".Div1").hide(); || $(".Div2").hide();
    ...etc...

......但没有运气。以下是我使用单个div（Div1）的方法：

$( window ).load(function () {
    $(".showHide").on("click", function () {
        var closed = $(".Div1").is(":hidden");
        if (closed)
            $(".Div1").show();
        else
            $(".Div1").hide();

        setCookie("open", closed, 365);
    });

    var openToggle = getCookie("open");    
    if (openToggle=="true") {        
        $(".Div1").show();
    }
    else {        
        $(".Div1").hide();
    }

});

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

非常感谢你的帮助。

我认为它越来越近了。我设置<div class="Div1">但我仍然无法独立地打开（或淡入淡出）每个div。你认为它可能与var openToggle有关吗？谢谢。： - ）

更新代码〜格林尼治标准时间下午2:45

$( window ).load(function() {
    $(".showHide").on("click", function() {
    $("div[class='Div1']").each(function(i,op) {
    $("div[class='Div1']").fadeOut(1);
    $("div[class='Div1']").eq($(this).index()).fadeIn(1000);
    setCookie("open_" + i, closed, 365);
    });
});
    $("div[class='Div1']").each(function(i,op)
   {
    var openToggle = getCookie("open_" + i);    
    if (openToggle=="true") {        
    $(this).show();
}
else {        
    $(this).hide();
}
});
function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}
});

Answer 1

由于您有多个div，因此需要遍历每个div并检查哪些是隐藏的，然后显示它们。此外，您需要唯一地保存和提取每个cookie，因此我使用了每个div的索引并将其附加到cookie名称。

提供.Div是一个应用于DIV元素的类。

 $(".showHide").on("click", function () {
          $(".Div1").each(function(i,op)
          {
              var closed  = $(this).is(":hidden");
              if(closed)
                 $(this).show();
              else 
                 $(this).hide();

             setCookie("open_" + i, closed, 365);
          });
    });

    $(".Div1").each(function(i,op)
   {
    var openToggle = getCookie("open_" + i);    
if (openToggle=="true") {        
    $(this).show();
}
else {        
    $(this).hide();
}
});

更新：如果div1类应用于其他元素，

 $(".showHide").on("click", function () {
          $("div[class='Div1']").each(function(i,op)
          {
              var closed  = $(this).is(":hidden");
              if(closed)
                 $(this).show();
              else 
                 $(this).hide();

         setCookie("open_" + i, closed, 365);
      });
});

$("div[class='Div1']").each(function(i,op)
   {
    var openToggle = getCookie("open_" + i);    
if (openToggle=="true") {        
    $(this).show();
}
else {        
    $(this).hide();
}
});

多个div + javascript + cookie

1 个答案: