切換列表和網格視圖

我用jQuery做了一個簡單的切換列表/網格視圖。我的問題是我怎樣才能使這個代碼，即jQuery更高效（更好的編碼）？這是基於我在我的項目中的代碼一些虛擬代碼：切換列表和網格視圖

HTML：

<div class="toggle-view"> 
    <span class="list l-active">List view</span> 
    <span class="grid">Grid view</span> 
</div> 

<ul id="listing-view"> 
    <li>Listing Block</li> 
    <li>Listing Block</li> 
    <li>Listing Block</li> 
    <li>Listing Block</li> 
    <li>Listing Block</li> 
    <li>Listing Block</li> 
    <li>Listing Block</li> 
    <li>Listing Block</li> 
</ul>

CSS：

.toggle-view span { 
    color:#00804e; 
    cursor:pointer; 
} 
.toggle-view .l-active { 
    color:#c4c3c1; 
    cursor:auto; 
} 
.list-view li { 
    width:100% 
} 
.grid-view li { 
    float:left; 
    width:50%; 
}

的jQuery：

$('.toggle-view span').on('click', function() { 
    if($(this).hasClass('grid')) { 
     $('#listing-view').addClass('grid-view'); 
     $('.toggle-view span').addClass('l-active'); 
     $('.toggle-view span.list').removeClass('l-active'); 
    } 
     else if($(this).hasClass('list')) { 
     $('#listing-view').removeClass('grid-view'); 
     $('.toggle-view span').addClass('l-active'); 
     $('.toggle-view span.grid').removeClass('l-active'); 
     } 
    });

來源

2013-01-16 Rob

你是什麼意思的優雅？ –

看到我的OP介紹，我已經修改它。 – Rob

它的方式很好。我沒有看到你可以做什麼，除了在每個'if'語句中刪除重複的代碼行，但你需要更多的代碼來處理它。另外，有2個點擊事件處理程序，但它不再需要。 – Archer

看到這個.. 。

$('.toggle-view span').on('click', function() { 
if($(this).hasClass('grid')) { 
    $('#listing-view').addClass('grid-view'); 
    $('.toggle-view .list').removeClass('l-active'); 
}else { 
    $('#listing-view').removeClass('grid-view'); 
    $('.toggle-view .grid').removeClass('l-active'); 
    } 
    $(this).addClass('l-active'); 
});

問候。

來源

2013-01-16 13:12:31

切換列表和網格視圖

回答

相關問題