使用2种不同的切换功能切换相同的表格行

如果用户点击名称或在AddressAlert，那么具体的详细信息行被显示或隐藏
如果用户点击“切换所有”行得到显示或隐藏，然后所有的细节。

问题是两个独立的切换函数不知道另一个切换函数是什么。因此，例如，如果点击“切换全部”，现在显示所有详细信息行，单击单个名称应该隐藏该详细信息行。但是，由于单个切换功能可达“显示”，因此需要2次点击才能隐藏该行的详细信息。

的HTML：

<div id="toggleAll"></div> 
<table> 
    <tr class="infoRow"><td class="addressAlert"></td><td class="name"></td></tr> 
    <tr class="details"></tr> 
    <tr class="infoRow"><td class="addressAlert"></td><td class="name"></td></tr> 
    <tr class="details"></tr> 
    <tr class="infoRow"><td class="addressAlert"></td><td class="name"></td></tr> 
    <tr class="details"></tr> 
</table>

的JavaScript：

//toggles beween showing and hiding the details for specific row 
$(
    function(){ 
     //if click on carrier name or address alert symbol 
     $('.name, .addressAlert').toggle(
      function() { 
      //gets the row clicked on, and finds the next row (the details row) 
      detailsTds = $(this).parents("tr.infoRow").next(); 
      //adds the "shown" class, which sets the display to table-row 
      detailsTds.addClass("shown"); 
      }, 
      function(){ 
      //gets the row clicked on, and finds the next row (the details row) 
      detailsTds = $(this).parents("tr.infoRow").next(); 
      //removes the "shown" class, thereby setting the display to none 
      detailsTds.removeClass("shown"); 
      } 
     ); 
    } 
); 

//toggle ALL details 
$(
    function(){ 
     //if click on carrier name or address alert symbol 
     $('#toggleAll').toggle(
      function() { 
      $('.details').addClass("shown"); 
      $('#toggleAll').text('[-] Hide all addresses'); 
      }, 
      function(){ 
      $('.details').removeClass("shown"); 
      $('#toggleAll').text('[+] Show all addresses'); 
      } 
     ); 
    } 
);

来源

2011-01-25 dmr

它值得在jQuery上toggleClass函数也值得熟悉。它不会直接帮助您切换相同的东西，但可以让您在没有两个接近相同的函数的情况下编写更干净的代码（因为它们通常与添加/删除类调用不同）。 – Chris 2011-01-25 16:54:23

你可以使用点击（）而不是切换（），然后显示或基于当前应用于类隐藏行。

来源

2011-01-25 16:02:30 derek

你能直接引用这个类吗？

来源

2011-01-25 16:14:25

我不明白你的意思... – dmr 2011-01-25 16:15:03

你为什么不更换第一个切换功能： “$（‘名称，.addressAlert。’）进行切换。”

，然后用所示讲座所以先初始化所有infoRows时间它会被显示，即使用户按下“切换全部”

来源

2011-01-25 16:41:13

使用2种不同的切换功能切换相同的表格行

回答

相关问题