jquery使用toggleClass

效果图：

方法1：

$('.icon_pic').click(function(){
    $('.mod_goods').removeClass('id_list');
    $('.mod_goods').addClass('id_pic');
    $('.viewmode').removeClass('status_list');
    $('.viewmode').addClass('status_pic');
})

$('.icon_list').click(function(){
    $('.mod_goods').removeClass('id_pic');
    $('.mod_goods').addClass('id_list');
    $('.viewmode').removeClass('status_pic');
    $('.viewmode').addClass('status_list');
})

方法2：

$('.icon_pic').click(function(){
    $('.mod_goods').removeClass('id_list').addClass('id_pic');
    $('.viewmode').removeClass('status_list').addClass('status_pic');
})

$('.icon_list').click(function(){
    $('.mod_goods').removeClass('id_pic').addClass('id_list');
    $('.viewmode').removeClass('status_pic').addClass('status_list');
})

方法3：

var func = function(flg) {
    var obj = $('.mod_goods');
    var obj1 = $('.viewmode');
    
    cls1 = flg==1?'id_pic':'id_list';
    cls2 = cls1=='id_pic'?'id_list':'id_pic';
    cls3 = flg==1?'status_pic':'status_list';
    cls4 = cls3=='status_pic'?'status_list':'status_pic';
    
    obj.removeClass(cls1).addClass(cls2);
    obj.removeClass(cls3).addClass(cls4);
    obj1.removeClass(cls1).addClass(cls2);
    obj1.removeClass(cls3).addClass(cls4);    
}
$('.icon_list').click(function(){ func(1); })
$('.icon_pic').click(function(){ func(0); })

方法4：

$('.icon_pic,.icon_list').click(function(){
    $('.mod_goods').toggleClass('id_pic').toggleClass('id_list');
    $('.viewmode').toggleClass('status_pic').toggleClass('status_list');
})