是否有可能優化這個jQuery

Question

用我對jQuery的最低了解，我以某種方式使它起作用-它的功能是切換布局網格/列表視圖。

我想知道是否可以通過某種方式進行改進：

    $('span').on('click',function(e) {
     if ($(this).hasClass('gridview')) {
       $('div[id^="block"]').removeClass('list').addClass('grid');
            $('span.gridview').addClass('active');
            $('span.listview').removeClass('active');
        }

     else if($(this).hasClass('listview')) {
       $('div[id^="block"]').removeClass('grid').addClass('list');
            $('span.listview').addClass('active');
            $('span.gridview').removeClass('active');
        }
});

下面的按鈕在其中設置/刪除了活動狀態的部分看起來並不像智能代碼..但是它可以工作:)-是否有更好的方法來刪除/添加類？

            $('span.gridview').addClass('active');
            $('span.listview').removeClass('active');

任何評論都非常感謝

jsfiddle在這里： http : //jsfiddle.net/8L8SN/

Answer 1

采用

$('span.gridview').toggleClass('active');

Answer 2

我想您實際上並不需要， if滿足以下條件即可：

$('div[id^="block"]').toggleClass('list').toggleClass('grid');
$('span.gridview').toggleClass('active');
$('span.listview').toggleClass('active');