使用切換保存到cookie顯示/隱藏

Question

這可以改進爲只有一個toogle功能嗎？

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