如何避免重複的代碼（頁面加載時切換）？

請看下面的代碼，如果你點擊子標題行，它會隱藏它的行。它運作良好。如何避免重複的代碼（頁面加載時切換）？

在第二個子標題行（<tr class="sub-title default-hide">） - 我希望此切換/隱藏默認情況下頁面加載..如何做到這一點，而不寫下重複的代碼如下？

$(".sub-title").on("click",function() { 
     tr = $(this).find('span').hasClass("arrow2"); 
     trSpan = $(this).find('span'); 
     $(this).nextUntil(".sub-title").each(function() { 
      if (!$(this).hasClass('head-order')) { 
       $(this).toggle(); 
       if (tr) { 
        trSpan.removeClass('arrow2').addClass('arrow1'); 
       } else { 
        trSpan.removeClass('arrow1').addClass('arrow2'); 
       } 
      } 
     }); 
    });

HTML

<table border="1"> 
<tbody> 
    <tr class="head"> 
    <td> title </td> 
    </tr> 
    <tr class="sub-title"> 
    <td>Sub Title 1 <span class="arrow2"> </span></td> 
    </tr> 
    <tr> <td>Item 1</td> </tr> 
    <tr> <td>Item 2</td> </tr> 
    <tr> <td>Item 3</td> </tr> 
    <tr class="sub-title default-hide"> 
    <td>Sub Title 2 <span class="arrow2"></span></td> 
    </tr> 
    <tr> <td>Item 4</td> </tr> 
    <tr> <td>Item 5</td> </tr> 
    <tr> <td>Item 6</td> </tr> 
    </tbody> 
</table>

來源

2012-08-08 I' ll-Be-Back

我創建了一個jsFiddle example與你提供的信息。

我編輯了一下代碼，使用默認的arrow -class，只是將類close添加到它，以定義新的樣式，這應該使代碼更短一些。

$(".sub-title").on("click",function() { 
    var trSpan = $(this).find('span'); 

    trSpan.toggleClass('closed'); 

    $(this).nextUntil(".sub-title").each(function() { 
     if (!$(this).hasClass('head-order')) { 
      $(this).toggle(); 
     } 
    }); 
});

使「默認隱藏」 - 元素頁面加載關閉，所有我做的是後結合的點擊處理程序來觸發它點擊事件。

$('.default-hide').trigger('click');

見搗鼓工作示例

來源

2012-08-09 00:18:42 GNi33

那是偉大的！感謝提高我的代碼，我不知道toggleClass（）和觸發器（）..甜！ – 2012-08-09 00:36:14

您可以手動觸發的單擊事件爲default-hide行。

Like this

$('.default-hide').trigger('click');

來源

2012-08-09 00:19:18 Johnny5

創建一個命名函數，並調用它幾次：

var toggleArrow = function(el) { 
    tr = $(el).find('span').hasClass("arrow2"); 
    trSpan = $(el).find('span'); 
    $(el).nextUntil(".sub-title").each(function() { 
     if (!$(el).hasClass('head-order')) { 
      $(el).toggle(); 
      if (tr) { 
       trSpan.removeClass('arrow2').addClass('arrow1'); 
      } else { 
       trSpan.removeClass('arrow1').addClass('arrow2'); 
      } 
     } 
    }); 
}; 

$(".sub-title").on("click", function(){ toggleArrow(this); }); 
$(".default-hide").each(function(i, el){ toggleArrow(this); });

來源

2012-08-09 00:20:51 mVChr

如何避免重複的代碼（頁面加載時切換）？

回答

相關問題