쿠키에서 선택된 div를 얻는 방법

Question

일부 div를 슬라이드하는 슬라이딩 메뉴가 하나 있습니다.

페이지를 새로 고치거나 변경 한 후에 쿠키의 사용을 위해 해당 메뉴의 상태를 원합니다.

내가 얻는 값이 무엇이든 쿠키는 전체 클래스에 영향을 미치므로 모든 하위 항목이 선택한 div 대신 화면에 표시됩니다.

검토를 위해 jsfiddle도 만들었습니다. 확인 here

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); 
    } 
    } 
    } 

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; 
} 

var widget2 = $(".widget2"), 
box2 = $(".box2"); 
var inner = $(".inner"), 
box = $(".box"); 

widget2.hide(); 
inner.hide(); 


if(getCookie('box2') == 'on'){ 
widget2.show(); 
//alert('hi'); 
}else{ 
widget2.hide(); 
//alert('hiiiiii'); 
} 

if(getCookie('box') == 'on'){ 
//widget2.show(); 
inner.show(); 
alert('hi'); 
}else{ 
inner.hide(); 
//alert('hiiiiii'); 
} 

box2.click(function() { 
$(this).next(widget2).slideToggle("fast", function() { 
var flag = ($(this).css("display") == 'none')?'off':'on'; 
    setCookie('box2', flag); 
}); 
}); 

var inner = $(".inner"), 
box = $(".box"); 

box.click(function() { 
$(this).next(inner).slideToggle("fast", function() { 
var flag = ($(this).css("display") == 'none')?'off':'on'; 
setCookie('box', flag); 
}); 
});​ 

Answer 1

이 기능은 현재 완벽하게 작동합니다. demo

$(document).ready(function() { 

$(".widget2").hide(); 
$(".inner").hide(); 

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); 
     } 
    } 
} 

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; 
} 

var widget2 = $(".widget2"); 
var box2 = $(".box2"); 
if (getCookie('box2cooki')) { 
    var id = getCookie('box2cooki'); 
    //alert('#'+id); 
    $('#' + id).next(widget2).slideDown(100); 
    $('#' + id).closest('div').next().find('.inner').slideDown(100); 
} else { 
    $(".widget2").hide(); 
    $(".inner").hide(); 
} 


box2.click(function() { 
    $(this).next(widget2).slideToggle(200); 
    var box2ID = $(this).attr('id'); 
    setCookie('box2cooki', box2ID); 
    //alert(box2ID); 
}); 
//$(".inner").hide(); 
$(".box").click(function() { 
    $(this).next(".inner").slideToggle(200); 
}); 

//alert(box2ID); 
});​