javascript - 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. 当我的行被扩展时，我想将“切换器”文本从“显示”更改为“隐藏”。
2. 当我的行被隐藏时，我不需要显示“更改订单”URL。它必须隐藏起来。

请帮帮我。

Answer 1

toggle() 和 toggleClass() 函数是方便的函数，可以更轻松地做一些简单的事情……但它们是有限的。

与其使用 toggleClass()，不如考虑使用 if 来检查元素是否具有“on”类。如果是，请删除该类并将文本更改为“显示”。如果没有，请添加“on”类并将文本更改为“Hide”。

您可以检查行的可见性，而不是使用 toggle()。如果它可见，请将其隐藏并隐藏“更改订单”URL。如果它不可见，请显示它并显示“更改订单”URL。

这是一个概念性的例子:

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

希望对您有所帮助!