jQueryあれこれ
親兄弟子要素への操作
HTML
<table> <tr class="mychuno-list"> <td> …… <!-- HTML5 カスタムデータ属性「data-*」を用いる --> <input type="button" id="btn-display" value="開く" data-is-open="0"> </td> </tr> <tr class="mychuno-detail" > <td> …… </td> </tr> </table>
Javascript(jQuery)
jQuery(function(){ $('.btn-display').click(function(e){ // HTML5 カスタムデータ属性「data-*」を取得する if($(this).data('is-open') === 0){ var $this_chuno = $(this); $this_chuno.parents('.mychuno-list').next('.mychuno-detail').fadeIn('fast', function() { $this_chuno.data('is-open', 1); // ボタンの表示名を書き換える(要素のvalueを変更) $this_chuno.val('閉じる'); }); }else if($(this).data('is-open') === 1){ var $this_chuno = $(this); $this_chuno.parents('.mychuno-list').next('.mychuno-detail').fadeOut('fast', function() { $this_chuno.data('is-open', 0); // ボタンの表示名を書き換える(要素のvalueを変更) $this_chuno.val('開く'); }); } }); });