基本切换功能的jQuery代码重构

我对jQuery非常陌生，这是我第一次发布Stack Overflow。基本切换功能的jQuery代码重构

我正在编写一个切换脚本，其中如果单击几个（但不是全部）表格单元格，脚本将切换它下面的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在那里随便点击，并有TR扩大细胞类？看起来像我应该能够，而不是只放置表格单元格，我不希望表扩展应该点击的类。（输入字段和垃圾桶细胞）

任何想法或建议，欢迎。谢谢！不选择（http://api.jquery.com/not-selector/）例如：

来源

2012-04-12 forcequitIO

这里有一个的jsfiddle使用jQuery的'不（）'选择：http://jsfiddle.net/ypeDw/ – 2012-04-12 16:20:05

@KarlBarker - 感谢您分享上面的链接。我看到你是如何改变我的代码来完成我所要求的。看一下jQuery API，并使用Mikey的例子，我也可以使用.not（）方法完成这个任务。再次感谢你的帮助！ – forcequitIO 2012-04-12 17:06:11

您可以通过使用做到这一点

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

来源

2012-04-12 16:17:08 Mikey

辉煌。正是我所希望的。非常感谢你。 – forcequitIO 2012-04-12 16:40:35

基本切换功能的jQuery代码重构

回答

相关问题