Question

这段代码出现在我被要求修改的js脚本中 - 我不确定为什么它是以这种方式编写的，对我来说没有意义。

任何人都可以帮助解释它在做什么，以及它是否可以简化为更有意义？

 var unformathtml = $(this).text();
 if(unformathtml.trim().length>showChar) {
        $(this).parent().parent().parent().parent().parent().find('.comment-footer').fadeOut();
 }

Answer 1

让我们假装我们有这样的DOM：

<parent-5>
  <target-element>Content</target-element>
  <parent-4>
    <parent-3>
      <parent-2>
        <parent-1>
          <focused-element>Some Text</focused-element>
        </parent-1>
      </parent-2>
    </parent-3>
  </parent-4>
</parent-5>

此代码所说的是“如果<focused-element>内的文字的字符多于showChar，则淡出<target-element>。

更好的方法是给<parent-5>某种标识符，可以是ID或类，而不是重复的.parent()调用。

这是一个展示这个想法的例子：

$('#oldMethod').click(function() {
  $(this)
    .parent()
    .parent()
    .parent()
    .parent()
    .parent()
    .find('.comment-footer')
    .toggleClass('red');
});

$('#newMethod').click(function() {
  $(this)
    .closest('.comment-container')
    .find('.comment-footer')
    .toggleClass('red');
});

.red {
  color: #F00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment-container">
  <div>
    <div>
      <div>
        <div>
          <button id="oldMethod">Old</button>
          <button id="newMethod">New</button>
        </div>
      </div>
    </div>
  </div>
  <div class="comment-footer">Footer</div>
</div>

Answer 2

哇，这真的没什么意义。它是这样做的：

1）从元素中获取原始内容 2）检查它是否长于一定长度 3）如果是这样，淡出页面上的另一个元素

父母（）的事情很容易出错。它在HTML树中上升了非常精确的级别，然后向下下降以找到具有“.comment-footer”类的元素。因此，DOM中任何一个元素的轻微重新排列都可能导致代码不再起作用，因为它无法找到指定的元素。

您想要的是更直接地找到要隐藏的标签。理想情况下，隐藏元素和决定隐藏的元素将在DOM中彼此相邻（即隐藏的元素将是决定是否隐藏它的元素的子元素或兄弟元素）。这使得一个人很容易找到另一个。如果那是不可能的，那么您的下一个最好的选择就是简单地为您要隐藏的元素分配一个ID，然后直接选择该ID：

 var unformathtml = $(this).text();
 if(unformathtml.trim().length>showChar) {
        $('#to_hide').fadeOut();
 }

快速使用.text（）（而不是.html（）），因为前者删除了任何HTML标记。这样您就可以测量$（this）中“实际”文本的数量，以确定是否要隐藏所述元素。所以这部分可能很好。

如何简化重复和复杂的js / jquery代码？

2 个答案: