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();