0

約20項目の比較表があります。リンクをクリックすると、そのアイテムに関する詳細情報が表示されます。次の関数を使用してこれを行うことができます。

$(function(){
  $('.show').click(function() {
    $('#keywords').fadeIn('slow');
 });
});

ただし、前述したように20個の項目があり、上記のコードを繰り返すと面倒になる可能性があります。

クリックされたリンクの下にdivを表示する関数を作成するにはどうすればよいですか？その上、divが開いているか表示されていて、別のアイテムがクリックされた場合、他のアイテムを閉じるかフェードアウトしてから、他のアイテムを表示します。

これがページの一部の私のHTMLです：

<tr class="second">
  <td class="cat" style="width: 33%;">
    <div>
      <a class="show" href="#"> Mobile Keywords</a>
    </div>
      <div id="keywords" class="hide">
         p>Info Here</p>
    </div>
 </td>

 <td style="width: 33%;">
    <i class="icon-ok"></i>
 </td>

 <td class="" style="width: 33%;">
     <i class="icon-ok"></i>
  </td>
</tr>

<tr class="second">
  <td class="cat" style="width: 33%;">
    <div>
      <a class="show" href="#">Another Category</a>
    </div>
      <div id="category-2" class="hide">
         p>Info Here</p>
    </div>
 </td>

 <td style="width: 33%;">
    <i class="icon-ok"></i>
 </td>

 <td class="" style="width: 33%;">
     <i class="icon-ok"></i>
  </td>
</tr>

これはプロパティを使用して実行できると思いますが、JSに精通してthisいないため、実装方法がわかりません。this

要約すると、このテーブルにクリックされるリンクがあり、すべてのアイテムに対して繰り返しコードを作成しなくても、リンクに適切なdivが表示されるようにするにはどうすればよいですか？

4

4 に答える 4

1

試す

$('.show').click(function() {
    $('.hide').hide();
    $(this).closest('td.cat').find('.hide').fadeIn();
});

フィドル

編集: 質問で要求された非表示機能を追加しました。

説明

上記のコードでthisは、クリック イベント ハンドラーをトリガーした要素 (クリックされたアンカー要素) を参照します。

次に、thisjQuery オブジェクト内にラップされ、メソッドを使用して共通の祖先まで DOM ツリーをトラバースし、.closestそこから表示する隠し要素を見つけます。

最初の$('.hide').hide()行の は一目瞭然です。表示される要素の をhideアニメーション化する前に、クラスを持つすべての要素を非fadeIn表示にします。

于 2012-10-17T23:40:50.140 に答える
0 
$(function(){
    $('.show').click(function() {
        $(this).parent().next('div').fadeIn('slow');
    });
});​

.parent ()メソッドを利用して、dom を 1 レベル上にトラバースし、次に.next()を使用して次の即時の divを取得します。これは、マークアップのシーケンスに従っているようです。

于 2012-10-17T23:39:21.283 に答える
0

HTML マークアップを使用すると、これが機能する可能性があります。同じ要素ではなく、目的の要素を表示する場合にのみ、現在表示されている div を非表示にします。

$(function(){
  $('.show').click(function() {
    if ( !$(this).hasClass('shown') )
    {
        $('.shown').removeClass('shown').parent().siblings('div').hide();
        $(this).addClass('shown').parent().siblings('div').fadeIn('slow');
    }
 });
});​

編集：作業コード。

于 2012-10-17T23:41:29.583 に答える
0 
$(function(){
  $('.show').click(function() {
    $('.hide').hide();
    $(this).parent('div').next('div').fadeIn('slow');
 });
});

これを (予想どおり) 使用し、その親 div を探してから、最初の兄弟 div を探します。

非表示機能を含めるように編集されました。

于 2012-10-17T23:42:33.977 に答える