jquery - 用于一长串相同功能的 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;
        });
}

当我点击一个 li 项目时，它只是隐藏了所有内容，所以这不是预期的结果。

任何帮助表示赞赏。谢谢你的时间！

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

然后，如果您将其他类添加到 li 项目，则可以避免出现问题。