使用切换保存到Cookie来显示/隐藏 [英] Show/Hide using toggle saving to cookie

问题描述

可以将其改进为仅具有一个功能吗?

Can this be improved to have only one toogle function?

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

推荐答案

您可以执行以下操作...

You can do something like this...

$("#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 }); 
});

这篇关于使用切换保存到Cookie来显示/隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！