同一函数的长列表的Jquery简写代码
我的HTML结构如下所示:同一函数的长列表的Jquery简写代码,jquery,Jquery,我的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 c
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>
我尝试的是:
for(i=2011; i<= 2020; i++){
$('.'+i+'').click(function() {
$(".news").show().not('.'+i+'').hide();
return false;
});
}
for(i=2011;i
更好的方法可能是将年份存储在数据属性中,例如:
<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>
然后,如果向li项添加其他类,则可以避免问题
$('#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;
});