クッキーへのトグル保存を使用した表示/非表示

Question

これは、1つだけのGoogle機能を持つように改善できますか？

var show = $("#shows ul li"); 
show.addClass("active"); 

$(show).each(function(c){ 
    var cvalue = $.cookie('show' + c); 
    if (cvalue == 'closed' + c) { 
     $(this).css({display:"none"}); 
     $(this).removeClass('active').addClass('inactive'); 
    }; 
}); 

$("#shows li.active").toggle(function(){ 
    var num = show.index(this); 
    var cookieName = 'show' + num; 
    var cookieValue = 'closed' + num; 
    $(this).slideUp(500); 
    $(this).removeClass('active'); 
    $.cookie(cookieName, cookieValue, { path: '/', expires: 10 }); 
},function(){ 
    var num = $(this).index(this); 
    var cookieName = 'show' + num; 
    $(this).slideDown(500); 
    $(this).addClass("active");   
    $.cookie(cookieName, null, { path: '/', expires: 10 }); 
}); 

$("#shows li.inactive").toggle(function(){ 
    var num = show.index(this); 
    var cookieName = 'show' + num; 
    $(this).slideDown(500); 
    $(this).addClass("active"); 
    $(this).removeClass('inactive');  
    $.cookie(cookieName, null, { path: '/', expires: 10 }); 
},function(){ 
    var num = show.index(this); 
    var cookieName = 'show' + num; 
    var cookieValue = 'closed' + num; 
    $(this).slideUp(500); 
    $(this).removeClass('active'); 
    $.cookie(cookieName, cookieValue, { path: '/', expires: 10 }); 
}); 

Answer 1

あなたはこのような何かを行うことができます...

$("#shows li").toggle(function(){ 

    var isactive = $(this).hasClass("active") ? true : false; 

    var num = show.index(this); 
    var cookieName = 'show' + num; 
    var cookieValue = null; 

    if(isactive){ 
     cookieValue = 'closed' + num; 
     $(this).slideUp(500); 
     $(this).removeClass('active'); 
    }else{ 
     $(this).slideDown(500); 
     $(this).addClass("active"); 
     $(this).removeClass('inactive');  
    } 

    $.cookie(cookieName, cookieValue, { path: '/', expires: 10 }); 

},function(){ 
    var isactive = $(this).hasClass("active") ? true : false; 

    var num = $(this).index(this); 
    var cookieName = 'show' + num; 
    var cookieValue = null; 

    if(isactive){ 
     $(this).slideDown(500); 
     $(this).addClass("active");   
    }else{ 
     cookieValue = 'closed' + num; 
     $(this).slideUp(500); 
     $(this).removeClass('active'); 
    } 
    $.cookie(cookieName, cookieValue, { path: '/', expires: 10 }); 
}); 

Answer 2

あなたのマークアップを見なければ、あなたは間違いなく、単一の、短い.toggleにそれらを減らすことができます。例えば、toggleClassとslideToggleメソッドを使用して：

$("#shows li").toggle(function(){ 
    var num = show.index(this); 
    $(this).slideToggle(500); 
    $(this).toggleClass('active'); 
    var cookieName = 'show' + num; 
    var cookieValue = ($(this).hasClass("active") ? 'show' : 'closed') + num; 
    $.cookie(cookieName, cookieValue, { path: '/', expires: 10 }); 
} 

あなたは本当に両方.activeと.inactiveクラスが必要ですか？私は、要素が単に.activeクラス（そして、「非アクティブ」を意味する何もない）の間でトグルすることを提案します。

Answer 3

たぶん、この意志は物事が良く見えるのです：

function func1() { 
    var num = show.index(this); 
    var cookieName = 'show' + num; 
    var cookieValue = 'closed' + num; 
    $(this).slideUp(500); 
    $(this).removeClass('active'); 
    $.cookie(cookieName, cookieValue, { path: '/', expires: 10 }); 
} 

function func2() { 
    var num = $(this).index(this); 
    var cookieName = 'show' + num; 
    $(this).slideDown(500); 
    $(this).addClass("active");   
    $.cookie(cookieName, null, { path: '/', expires: 10 }); 
} 

$("#shows li.active").toggle(func1,func2); 
$("#shows li.inactive").toggle(func2,func1);