如何避免重复的代码（页面加载时切换）？

请看下面的代码，如果你点击子标题行，它会隐藏它的行。它运作良好。如何避免重复的代码（页面加载时切换）？

在第二个子标题行（<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

如何避免重复的代码（页面加载时切换）？

回答

相关问题