1

このjqueryの問題を理解するのに少し問題があります。各行にいくつかの数字が表示されたテーブルがあります。hrefリンクである番号をクリックすると、最初は非表示になっている「test」というdivが切り替わるようにしたいと思います。現在、私のコードでは、番号の付いた1つの行をクリックすると、同じクラス名を共有しているため、すべての行が切り替わります。クリックされた行のみが代わりに切り替わるように、この問題を解決するにはどうすればよいですか？

テーブルとコンテンツが動的に生成されるいくつかの追加情報。

私のHTML

<table>
 <tr>
  <td>
    <a class="showinfo" href="#"><b>ID:12</b>Click me<b></a>
    <div class="test">Test</div>
  </td>
 </tr>
 <tr>
  <td>
    <a class="showinfo" href="#"><b>ID:46</b>Click me<b></a>
    <div class="test">Test</div>
  </td>
 </tr>
</table>

私のJSは次のとおりです

$('.test').hide();
$('.showinfo').click(function(){
    $('.test').toggle();    
});

ありがとうございました。

4

6 に答える 6

2

これを試して

$('.showinfo').click(function(e){
    e.preventDefault();
    $(this).closest('td').find(".test").toggle();
});

デモ。

于 2012-07-18T19:50:30.770 に答える
1

これがjsが必要なものです

$('.test').hide();
$('.showinfo').click(function(){
    $('.test',$(this).parent()).toggle();    
});​

ここでデモを見ることができます

于 2012-07-18T19:46:22.050 に答える
1

次にjQueryを使用する

$('.showinfo').click(function(){
  $(this).next('.test').toggle();    
});

セレクターに一致する次の要素が見つかります。

于 2012-07-18T19:46:38.807 に答える
0

これを使って：

$('.showinfo').click(function(){
 $(this).find(".test").toggle();
});

また、.testをdisplay：noneで設定します。cssから。

于 2012-07-18T19:46:53.660 に答える
0

まず、要素を閉じる必要があります。これは次のとおりです。

<a class="showinfo" href="#"><b>ID:12</b>Click me<b></a>

たぶん

<a class="showinfo" href="#"><b>ID:12</b>Click me</a>

そうしないと、開いている要素があり、別の開いている要素などの内部<b>で要素を閉じることができません。<a>

次に、兄弟要素をターゲットにして、クラスでフィルタリングします。

$('.showinfo').on('click', function(e){
  e.preventDefault();
  $(this).siblings('.test').toggle();    
});

また、要素のデフォルトのアクションを防止<a>して、上部に移動しないようにする必要があります。

コードが例のように機能し、両方の要素を非表示にする場合、イベントを委任する必要はありませんが、ハンドラーがバインドされたときに存在しない動的要素では、最も近い非動的要素にイベントを委任する必要があります、例としてドキュメントを使用します。

$(document).on('click', '.showinfo', function(e){...});

フィドル

于 2012-07-18T19:53:05.933 に答える
0

jsFiddle： http: //jsfiddle.net/3Wdp2/18/

次の行は無効です：

<a class="showinfo" href="#"><b>ID:12</b>Click me<b></a>

<b>余分なタグを削除します。

$(".showinfo").click( function()
{
    // The TD above the link
    var parent = $(this).parent();

    // The TD child that is a div
    $(parent).children("div").toggle();
});​
于 2012-07-18T19:55:43.180 に答える