2

私は jQuery を初めて使用し、これが Stack Overflow への最初の投稿です。

私はトグル スクリプトを作成しています。ここでは、テーブル セルのいくつか (すべてではない) がクリックされると、スクリプトはその下の tr の可視性を切り替え、セルの 1 つ内の div で変更クラスを実行して、プラス/マイナスのアイコン。スクリプトと HTML を簡素化するか、これを改善するための一般的な指針を得たいと考えています。

jQuery は次のとおりです。

$(function() {

/************************************************************/
// Show/Hide functionality

   $('.showDetails', '#summaryTable').hide();

   $('#summaryTable').on('click', '.toggleIt', function(e){

   var $this = $(this).parents("tr");

   $this.next().toggle(0, function() {
        var rowExpand = $('.rowExpand', $this);
        rowExpand.toggleClass('rowContract');
     });
  });

/************************************************************/

});

HTML は次のとおりです。

<table id="summaryTable">

<thead>
<tr>
...
</tr>
</thead>

<tbody>

<tr>
<td class="toggleIt"><div class="rowExpand">Expand/Contract details</div></td>
<td class="toggleIt">Content</td>
<td class="toggleIt">Content</td>
<td>*input field*</td>
<td class="toggleIt">Content</td>
<td class="toggleIt">Content</td>
<td>*Trash can icon*</td>
</tr>

<tr class="showDetails">
<td colspan="7" class="expand">

   <div>
     Content to be shown when toggled...
   </div>

</td>
</tr>

<!-- Rinse and repeat -->

</tbody>

</table>

クリックして tr を展開しても問題ないセル上のすべての toggleIt クラスに注目してください。代わりに、クリックしてテーブルを展開したくないテーブルセルのみにクラスを配置できるようにする必要があるようです。(入力フィールドとゴミ箱のセル。)

ご意見やご提案は大歓迎です。ありがとうございました！

4

1 に答える 1

1

:not セレクター (http://api.jquery.com/not-selector/) を使用してこれを行うことができます。

$("td:not(.toggleDisabled)").each(function(){$(this).click(function(){$(this).toggle()})})
于 2012-04-12T16:17:08.797 に答える