jQuery的切換與餅乾

我試圖代碼來自這兩個問題結合錶行：jQuery的切換與餅乾

第一個示例實現幻燈片切換到隱藏或顯示一組表中的行。第二個示例顯示如何在一組使用幻燈片切換的列表中使用cookie來隱藏或顯示每個列表中的項目。

現在我想建立一個使用cookie的表格（就像第二個示例中一樣），以便在頁面刷新時行保持隱藏或顯示。我已經把這兩個代碼混合在一起，但我很難弄清楚如何將cookie值與它們各自的表格行關聯起來。

編輯：

好吧，我想通了。我重新安排了我的「翻轉」和「面板」類，使我的html結構更加清晰，並且更易於瀏覽。然後解決方案更容易找到。請參閱下面答案部分的代碼。

來源

2011-02-25 CCC

@ CCC - >太棒了！至少BRAVO解決你自己的問題！我相信有人會覺得這很有用！願原力與你同在！ ;）P.S. - >順便說一下是一個偉大的代碼！ Thx與社區分享 – 2011-03-15 20:31:02

您能否將您的答案移出問題並轉化爲答案（您可以回答自己的問題），然後接受答案？ – 2011-03-24 06:24:17

好點，薩米爾。完成。 – CCC 2011-03-29 14:24:38

下面是代碼（需要jquery.cookie.js才能工作）。幾乎所有的功勞歸功於Toby Pitman。我所做的只是使他的可摺疊面板概念適用於桌子內部。

<html> 
    <head> 
     <style> 
      td {padding: 5px;} 
      .flip {cursor:pointer;} 
     </style> 

     <script type="text/javascript" src="js/jquery.js"></script> 
     <script type="text/javascript" src="js/jquery.cookie.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 

       $(".flip").addClass("active"); 

       var flips = $(".flip").length; 


       for (c=0; c<=flips; c++){ 
        var cvalue = $.cookie("panel" + c); 
        if (cvalue == 'closed' + c) { 
         $(".section").eq(c).css({display:"none"}); 
         $(".section").eq(c).prev().removeClass('active').addClass('inactive'); 
        }; 
       }; 

       $(".flip.active").toggle(
        function(){ 
         var num = $(".flip").index(this); 
         var cookieName = "panel" + num; 
         var cookieValue = "closed" + num; 
         $(this).closest("tbody").next(".section").slideUp(250); 
         $(this).removeClass("active"); 
         $.cookie(cookieName, cookieValue, {path: '/', expires: 10}); 
        }, 
        function(){ 
         var num = $(".flip").index(this); 
         var cookieName = "panel" + num; 
         $(this).closest("tbody").next(".section").slideDown(250); 
         $(this).addClass("active"); 
         $.cookie(cookieName, null, {path: '/', expires: 10}); 
        }); 


        $(".flip.inactive").toggle(
        function(){ 
         var num = $(".flip").index(this); 
         var cookieName = "panel" + num; 
         $(this).closest("tbody").next(".section").slideDown(250); 
         $(this).addClass("active"); 
         $(this).removeClass("inactive"); 
         $.cookie(cookieName, null, {path: '/', expires: 10}); 
        }, 
        function(){ 
         var num = $(".flip").index(this); 
         var cookieName = "panel" + num; 
         var cookieValue = "closed" + num; 
         $(this).closest("tbody").next(".section").slideUp(250); 
         $(this).removeClass("active"); 
         $.cookie(cookieName, cookieValue, {path: '/', expires: 10}); 
        }); 
      }); 
    </script> 

     </head> 

    <body> 
     <table id="main_table"> 
      <thead> 
       <tr class="firstline"> 
        <th>Column1</th> 
        <th>Column2</th> 
        <th>Column3</th> 
        <th>Column4</th> 
       </tr> 
      </thead> 
      <tbody class="flip"> 
       <tr style="background-color:green; color:white"> 
        <td colspan="4"> Section 1 </td> 
       </tr> 
      </tbody> 
      <tbody class="section"> 
       <tr> 
        <td>item 111</td> 
        <td>item 112</td> 
        <td>item 113</td> 
        <td>item 114</td> 
       </tr> 
       <tr> 
        <td>item 121</td> 
        <td>item 122</td> 
        <td>item 123</td> 
        <td>item 124</td> 
       </tr> 
       <tr> 
        <td>item 131</td> 
        <td>item 132</td> 
        <td>item 133</td> 
        <td>item 134</td> 
       </tr> 
      </tbody> 
      <tbody class="flip"> 
       <tr style="background-color:green; color:white"> 
        <td colspan="4"> Section 2 </td> 
       </tr> 
      </tbody> 
      <tbody class="section"> 
       <tr> 
        <td>item 211</td> 
        <td>item 212</td> 
        <td>item 213</td> 
        <td>item 214</td> 
       </tr> 
       <tr> 
        <td>item 221</td> 
        <td>item 222</td> 
        <td>item 223</td> 
        <td>item 224</td> 
       </tr> 
       <tr> 
        <td>item 231</td> 
        <td>item 232</td> 
        <td>item 233</td> 
        <td>item 234</td> 
       </tr> 
      </tbody> 
      <tbody class="flip"> 
       <tr style="background-color:green; color:white"> 
        <td colspan="4"> Section 3 </td> 
       </tr> 
      </tbody> 
      <tbody class="section"> 
       <tr> 
        <td>item 311</td> 
        <td>item 312</td> 
        <td>item 313</td> 
        <td>item 314</td> 
       </tr> 
       <tr> 
        <td>item 321</td> 
        <td>item 322</td> 
        <td>item 323</td> 
        <td>item 324</td> 
       </tr> 
       <tr> 
        <td>item 331</td> 
        <td>item 332</td> 
        <td>item 333</td> 
        <td>item 334</td> 
       </tr> 
      </tbody> 
     </table> 

    </body> 
</html>

來源

2011-03-29 14:24:00 CCC

jQuery的切換與餅乾

回答

相關問題