JQuery Onclick Image隠しテーブルの行を表示

Question

私は現在2行のテーブルを持っています。

行1にはイメージがあり、行2は非表示になっています。

JQueryを使用すると、この非表示の行を表示する必要があります。ここで

はテーブルです：

推測しただろう

<table> 
<tr> 
    <td><img src="/default.png" alt="" /></td> 
</tr> 

<tr style="display:none"> 
    <td><img src="/default2.png" alt="" /></td> 
</tr> 
</table> 

Answer 1

$("td").on("click", "img", function(){ 
    $("tr:hidden").show(); 
}); 

？

Answer 2

まず、参照できるように、IDまたはクラスを行に配置します。

<table> 
<tr> 
    <td><img src="/default.png" alt="" class="trigger"/></td> 
</tr> 

<tr style="display:none" id="target"> 
    <td><img src="/default2.png" alt="" /></td> 
</tr> 
</table> 

その後、イベントにイベントリスナー関数を追加するためのjQueryを使用します。

<script> 
    $(".trigger").click(function(){ $("#target").show(); }); 
</script> 

あなたが見ることができるように、triggerはクラスであり、そしてあなたはjQueryのにドット使用していることを教えて：.triggerを、 targetはIDであり、＃：#targetを使用する必要があります。

同じクラスの複数の要素を持つことはできますが、特定のIDを持つ要素は（おそらく）1つだけです。

私の例では、イベントをトリガーする複数の画像と1つのターゲットdivを持つことができます。

Answer 3

あなたが使用することができ、その常に第二の場合：

$('table tr:nth-child(2)').show(); 

を一つだけを持っていると、インデックスがわからない場合：

$("tr").each(function(ele){ 
    $(this).show(); 
}); 

Answer 4

変種の何百万があります:)

$("tr").not(':hidden').find('img').click(function(){ 
    $(this).parent().siblings().show(); 
}); 

Answer 5

非表示の行を表示する画像にクリックハンドラを割り当てます。

例：

<style type="text/css"> 
.hide { 
    display: none; 
} 
</style> 

<script type="text/javascript"> 
$('td img').click(function() { 
    $('tr:hidden').show(); 
}); 
</script> 

<table> 
    <tr> 
     <td><img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png" alt="Google" /></td> 
    </tr> 
    <tr class="hide"> 
     <td>You clicked on the image!</td> 
    </tr> 
</table>