jQuery的速記代碼對於同功

Question

一長串我有一個HTML的結構像下面這樣：

List 
<ol id="years"> 
<li class="2011">2011</li> 
<li class="2012">2012></li> 
<li class="2013">2013></li> 
</ol> 

News: 
<div class="news 2011">Some News here</div> 
<div class="news 2012">Some News here</div> 
<div class="news 2013">Some News here</div> 

我需要下面的代碼的速記代碼（它的工作原理，但我希望它是自動的，手動不）：

$('.2011').click(function() {  
    $(".news").show().not('.2011').hide() 
return false; 
     }); 

$('.2012').click(function() {  
    $(".news").show().not('.2012').hide() 
return false; 
     }); 

$('.2013').click(function() {  
    $(".news").show().not('.2013').hide() 
return false; 
     }); 

我的嘗試是：

for(i=2011; i<= 2020; i++){ 

$('.'+i+'').click(function() {  
    $(".news").show().not('.'+i+'').hide(); 
return false; 
     }); 
} 

當我點擊鋰項目，它只是隱藏了一切，所以這不是預期的結果。

任何幫助表示讚賞。 感謝您的時間！

Answer 1

$('#years li').click(function(){ 
    $('.news').show().not('.' + $(this).attr('class')).hide(); 
    return false; 
}); 

一個更好的辦法可能是存放一年的數據屬性，如：

<ol id="years"> 
    <li class="2011" data-year="2011">2011</li> 
    <li class="2012" data-year="2012">2012></li> 
    <li class="2013" data-year="2013">2013></li> 
</ol> 

然後去：

$('#years li').click(function(){ 
    $('.news').show().not('.' + $(this).data('year')).hide(); 
    return false; 
}); 

然後您避免的問題，如果您添加其他類的李項目。