如何避免多次遍历同一个 DOM 路由？

Question

我有一个on 函数，其中有两个鼠标事件mouseenter 和mouseleave。当这些事件被触发时，它们会运行不同的函数，一个添加一个类，另一个删除它。

$(this).siblings('.testimonial').find('p').addClass('unseen');

$(this).siblings('.testimonial').find('p').removeClass('unseen');

问题是，我正在执行以下 DOM 遍历两次：

$(this).siblings('.testimonial').find('p')

但我不知道如何将这种遍历保存为一个函数中的变量并将其用作另一个函数。这是我的完整 JS 代码：

JavaScript

(function ($) {

    var testimonial = $('.testimonial');
    var testimonialHeight = testimonial.outerHeight();
    var testimonialWidth = testimonial.outerWidth();

    testimonial.find('p').addClass('unseen');

    testimonial.css({
        height: testimonialHeight,
        width: testimonialWidth
    });

    $('.client').on({
        mouseenter: function() {
            $(this).siblings('.testimonial').find('p').removeClass('unseen');
        },
        mouseleave: function() {
            $(this).siblings('.testimonial').find('p').addClass('unseen');
        }
    });

})(jQuery);

HTML

<ul class="list-unstyled list-inline">
  <li>
    <div class="testimonial"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<p></div>
      <img class="client" src="https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg" alt="" />
  </li>
  <li>
    <div class="testimonial"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p></div>
    <img class="client" src="https://s3.amazonaws.com/uifaces/faces/twitter/gerrenlamson/128.jpg" alt="" />
  </li>
  <li>
    <div class="testimonial"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></div>
    <img class="client" src="https://s3.amazonaws.com/uifaces/faces/twitter/jadlimcaco/128.jpg" alt="" />
  </li>
</ul>

有人可以提出更好的方法吗？

谢谢。

Answer 1

您可以更改为对这两个事件使用一个公共事件处理程序，并根据它是哪个事件来设置操作：

$('.client').on("mouseenter mouseleave", function(e) {
    var method = e.type === "mouseenter" ? "removeClass" : "addClass";
    $(this).siblings('.testimonial').find('p')[method]('unseen');
});

下面是对发生的事情的解释：

• .on("mouseenter mouseleave", function(e) {...}) 将多个事件连接到同一个事件处理程序。
• e.type 是当前事件的事件名称，因此当您有多个事件触发同一个事件处理程序时，您可以查看触发的是哪个事件。
• var method = e.type === "mouseenter" ? "removeClass" : "addClass" 类似于 if/else 语句，它根据e.type 的值将"removeClass" 或"addClass" 分配给method 变量。它被称为ternary operator。
• obj[method] 是使用变量作为属性名称而不是字符串文字的属性引用。所以当method 是"addClass" 时，obj.addClass 与obj[method] 相同。在末尾添加() 使其成为函数调用，然后method 为"addClass" 时obj.addClass('unseen') 与obj[method]('unseen') 相同。

所以，再次打破最后一行：

// find the right paragraphs
$(this).siblings('.testimonial').find('p')

// get the property whose name is in the method variable
$(this).siblings('.testimonial').find('p')[method]

// call that property as a function and pass it 'unseen'
$(this).siblings('.testimonial').find('p')[method]('unseen');

---

一个可能对 DRY 有用的工具是 .hover()，因为它是 mouseenter 和 mouseleave 的快捷方式。如果您知道相关段落在悬停之前总是被标记为未见，并且页面中没有其他代码会与未见类混淆（您在问题中没有说什么），那么您可以使用 @987654342 的快捷方式@

$('.client').hover(function() {
    $(this).siblings('.testimonial').find('p').toggleClass('unseen');
});

---

将重复的代码移动到可以在两个地方使用的通用函数中的更常见方法如下所示：

function getSiblingParagraphs(parent) {
    return $(parent).siblings('.testimonial').find('p');
}

$('.client').on({
    mouseenter: function() {
        getSiblingParagraphs(this).removeClass('unseen');
    },
    mouseleave: function() {
        getSiblingParagraphs(this).addClass('unseen');
    }
 });

Answer 2

如果确实需要缓存特定的同级子元素而不是所有.testimonial p，则可以使用以下逻辑：

$('.client').each(function () {
    this._testimonialP = $(this).siblings('.testimonial').find('p').addClass('unseen');// But .unseen should be set in HTML markup by default
}).hover(function () {
    this._testimonialP.toggleClass('unseen');
});

Answer 3

如果您正在寻找一种 DRY 方法来执行此操作，您可以编写一个可重用的函数来找到您想要的兄弟姐妹。

function findTestimonialParagraph($root) {
    return $root.siblings('.testimonial').find('p');
}

$('.client').on({
    mouseenter: function() {
        findTestimonialParagraph($(this)).removeClass('unseen');
    },
    mouseleave: function() {
        findTestimonialParagraph($(this)).addClass('unseen');
    }
});

这样，如果您需要更改推荐段落的访问方式，您只需在一个地方进行。

Answer 4

您可以简单地执行以下操作：

var $client = $('.client');
var $clientTestimonialParagraphs = $client.siblings('.testimonial').find('p');

$client.on({
        mouseenter: function() {
            $clientTestimonialParagraphs.removeClass('unseen');
        },
        mouseleave: function() {
            $clientTestimonialParagraphs.addClass('unseen');
        }
    });

我希望这会有所帮助。

Answer 5

尝试存储所选项目

var p = testimonial.find('p').addClass('unseen');

然后对存储的进行操作

$('.clienet').hover(
    function(){ p.removeClass('unseen') }, 
    function(){ p.addClass('unseen') }
)