jQuery的隐藏表行

Question

我有一个隐藏下列jQuery脚本/扩展在表行：

它是由这个例子启发：

http://www.jankoatwarpspeed.com/examples/expandable-rows/

<script type="text/javascript"> 

$(document).ready(function(){ 
    $("#orders tr:odd").addClass("odd"); 
    $("#orders tr:not(.odd)").hide(); 
    $("#orders tr:first-child").show(); 

    $("#orders tr.odd").click(function(){ 
     $(this).next("tr").toggle(); 
     $(this).find(".toggler").toggleClass("on"); 
     $(this).find(".toggler").text("hide"); 

    }); 
}); 

</script>   

我的HTML如下：

<table class="blueWrapperTbl" id="orders"> 
    <tbody> 
    <tr> 
     <td> <h:outputText value="#{order.orderId}" /> </td> 
     <td> <h:outputText value="#{order.orderId}" /> </td> 
     <td> <h:outputText value="#{order.orderId}" /> </td> 
     <td> <h:outputText value="#{order.orderId}" /> </td> 
     <td><a href="#" class="ubber"><b>Change Order</b></a></td> 
     <td><a href="#" class="toggler">Show</a></td> 
    </tr> 
    <tr> 
    ... 
    </tr> 
</table> 

相关的CSS部分如下：

.blueWrapperTbl .toggler { background:url(../images/plus.gif) right center no-repeat; padding-right:20px; display:inline-block; text:'fff'} 
.blueWrapperTbl .toggler.on { background:url(../images/minus.gif) right center no-repeat; } 

我需要做到以下几点：

1. 当我行花费我想改变从“显示”“隐藏”“toggler”文本。
2. 当我的行被隐藏时，我不需要显示“更改订单”网址。它必须隐藏。

请帮帮我。

Answer 1

toggle()和toggleClass()函数是方便的函数，使它更容易做简单的事情...但它们是有限的。

而不是使用toggleClass()，您可能会考虑使用if来检查元素是否具有“on”类。如果是，请删除该类并将文本更改为“显示”。如果没有，请添加“on”类并将文本更改为“隐藏”。您可以检查行的可见性，而不是使用toggle()。如果可见，请隐藏它并隐藏“更改订单”网址。如果不可见，请显示并显示“更改订单”网址。

这里有一个概念上的例子：

$('#orders td a') 
    .each(function(){ 
     if($(this).hasClass('on')) { 
      $(this).removeClass('on'); 
      // do other things 
     } else { 
      $(this).addClass('on'); 
      // do other things 
     } 
    } 
; 

我希望这有助于！

Answer 2

1）替代

$(this).find(".toggler").text("hide"); 

使用

$(this).find(".toggler").html("hide"); 

2）添加到您的点击处理函数

$(this).find(".ubber").toggle();