0

ここで簡略化したバージョンを作成しました: http://jsfiddle.net/Y5zYy/

リストの n 番目の表示項目に別の CSS スタイルを追加しようとしているので、たとえばユーザーが group2 をクリックすると、そのグループの 3 番目の項目が黒くなります (番号 4)。リスト全体の 3 番目の項目である 2 番目の項目が黒くなります。

仕組みは次のとおりです。各グループをクリックすると、そのグループのアイテムに「可視」というクラスが追加されます。次に、クリックするたびにJavaScriptに可視アイテムをカウントさせ、その数に関係なくn番目の可視アイテムにスタイルを追加します。リスト全体で。

HTML:

  <ul>
    <li class="g1">1</li>
    <li class="g1 g2">2</li>
    <li class="g1 g2">3</li>
    <li class="g1 g2">4</li>
    <li class="g1 g2">5</li>
    <li class="g1 g2">6</li>
    <li class="g1 g2">7</li>
    <li class="g1 g2">8</li>
    <li class="g1 g2">9</li>
    <li class="g1 g2 g3">10</li>
    <li class="g1 g2 g3">11</li>
</ul>
<a id="g1" href=#>Group1</a>
<a id="g2" href=#>Group2</a>
<a id="g3" href=#>Group3</a>

JS:

$(window).load(function(){


         $('li:nth-of-type(3)').css({
                                  "background-color":"#000",
                                   "font-weight":"bold",

      })



 $("li").addClass("visible");
$("a").click(function() {
             $("li").removeClass("visible");
             $('li').css({
                 "background-color":"red"
                                      })
               $(this).each(function() {
     $("." + $(this).attr('id')).addClass("visible");
   });
       if( $('li.visible').length > 3 ){
         $('li:nth-of-type(3)').css({
                                  "background-color":"#000",
                                   "font-weight":"bold",

      })
}
        });

});//]]>
4

1 に答える 1

1

<li>残りを非表示にした後、グループの 3 番目の要素をターゲットにしようとしている場合は:eq()、jQuery でセレクターを使用する必要があります。

$('li:eq(2)').css({
    "background-color": "#000",
    "font-weight": "bold"
});

eq() は 0 から始まるため、3 番目を選択する<li>場合は、使用する必要があります:eq(2)

要素の外観を切り替えたい場合は、クラスを追加および削除することをお勧めします。これにより、不要なときにデフォルトのスタイルに簡単にリセットできます。

$('li.visible:eq(2)').addClass('highlighted');

CSS:

.highlighted {
    background-color: #000;
    font-weight: bold;
}
于 2013-03-02T10:18:12.750 に答える