Question

这可以改进只有一个切换功能吗？

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

使用切换保存到cookie显示/隐藏

3 个答案: