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

How to avoid duplicate code (toggle when page loaded)?

本文关键字：加载 何避免 代码      更新时间：2023-09-26

请参阅下面的代码，如果您单击副标题行，它将隐藏带有它的行。效果很好。

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

我用你提供的信息创建了一个jsFiddle示例。

我稍微编辑了一下代码，使用默认的 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');

请参阅小提琴以获取工作示例

创建一个命名函数并调用它几次：

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); });

您可以手动触发default-hide行的单击事件。

喜欢这个

$('.default-hide').trigger('click');
相关文章：