jQuery code refactoring basic toggle function

Question

Я очень новичок в jQuery, и это мое первое сообщение в Stack Overflow.

Я пишу скрипт Toggle, если щелкнут несколько (но не все) ячеек таблицы, скрипт переключит видимость tr ниже него и выполнит класс изменения в 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> 

Обратите внимание всех тех, кто toggleIt классы на клетках, где это OK нажать и есть тр расширить? Похоже, я должен уметь вместо этого размещать класс только в ячейках таблицы, где я не хочу, чтобы таблица расширялась, если щелкнуть. (Поле ввода и ячейки корзины.)

Любые мысли или предложения приветствуются. Спасибо!

Answer 1

вы можете сделать это с помощью: не селектора (http://api.jquery.com/not-selector/) , например.

$("td:not(.toggleDisabled)").each(function(){$(this).click(function(){$(this).toggle()})})