3

以下のような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 アイテムをクリックすると、すべてが非表示になるだけなので、期待どおりの結果ではありません。

どんな助けでも大歓迎です。御時間ありがとうございます！

4

1 に答える 1

5 
$('#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 アイテムに他のクラスを追加すると、問題を回避できます。

于 2012-08-27T08:54:35.600 に答える