1

私が作った配列が必要です。1 つはいくつかのアンカー タグを取得し、もう 1 つは一連の ul を取得します。すべてのアンカー タグには name 属性があり、ul にはアンカー タグの name 属性に一致する ID があります。これに加えて、すべての UL にはクラス ".students" と ".hidden" があります。(.hidden が行うことは、display:none を設定することだけです)

<div>
  <ul>
      <li><h4><a name="5th-grade">5th Grade</a></h4></li>
      <li><h4><a name="6th-grade">6th Grade</a></h4></li>
      <li><h4><a name="7th-grade">7th Grade</a></h4></li>
      <li><h4><a name="8th-grade">8th Grade</a></h4></li>
  </ul>
</div>
<div>
  <ul id="5th-grade" class="students hidden ">
      <li>Billy Bob</li>
  </ul>

  <ul id="6th-grade" class="students hidden">
      <li>Bob Sackamano</li>
  </ul>

  <ul id="7th-grade" class="students hidden">
      <li>Matt Blunt</li>
  </ul>
</div>

私がやろうとしているのは、アンカータグの1つをクリックすると、対応する名前属性が同じIDのulに一致し、「.hidden」クラスを削除して表示し、非表示にすることです「.hidden」クラスを追加して、一致しない他の ul を削除します。

これは、小さなjqueryを使用してこれまでに思いついたものと、停止した場所です。

    var aGradelist = $('#grade-list ul li a');
    var aStudents = $('.students');

    aGradelist.click(function(){
        var i = '#' + $(this).attr('name');

        $('.students'+i).removeClass('hidden');

        for(var j=0;j<aStudents.length;j++)
        {
           console.log(aStudents.attr('id')[j]);
        }

});

正しいulが表示されるのは問題ありませんが、「.hidden」クラスを他のulに追加できませんでした。私の問題の少なくとも 1 つが for ループにあることがわかりました。aStudents 配列の各 ul を調べるのではなく、aStudents 配列の最初の項目の ID の文字を調べるのです。

私はこれに正しい方法でアプローチしていますか？これを行う方法についていくつかのアイデアはありますか？

4

2 に答える 2

2

HTML が有効である (ID が重複していない) 場合、これでうまくいくはずです。

var aGradelist = $('#grade-list ul li a');
var aStudents = $('.students');
aGradelist.click(function() {
    aStudents.addClass('hidden');
    $('#' + $(this).attr('name')).removeClass('hidden');
});

jQuery は、DOM 要素に対してメソッドを呼び出すと、すぐに DOM 要素を反復処理します。

また、最初のループで何が問題だったのかを知りたい場合は、文字列である属性を[j]取得する前に使用する必要があります。idしたがって、idプロパティを適切に取得するには:

for(var j=0;j<aStudents.length;j++) {
   console.log(aStudents[j].id);
}

$()[j]$().get(j)( jQuery.fn.getdocs )の短縮形です。

于 2013-02-08T02:49:16.327 に答える
1

これを試して：

var aGradelist = $('#grade-list ul li a');
var aStudents = $('.students');

aGradelist.click(function(){
    var i = '#' + $(this).attr('name');
    aStudents.addClass('hidden');
    $('ul' + i).removeClass('hidden');
}

hiddenこれが行うことは、クラスをすべての に追加し、クリックされた の id を持つクラスからulのみ削除することですulanchor

于 2013-02-08T02:48:04.667 に答える