javascript - 在选择类上使用 jQuery 不是所有具有相同类的 div

Question

不太确定如何在标题中表达这一点。无论如何，我要说的是我有三个具有相同类名的 div。我想添加一个鼠标悬停功能，它只适用于选择的 div，而不是同时适用于所有的 div。例如 :( https://jsfiddle.net/1y2jw2y0/ ) 这使所有 div 显示/隐藏，我只希望选定的 div 作用于 jQuery 函数。

HTML:

<div class="box">
  <p class="show">Show</p>
  <p class="hide">hide</p>
</div>

<div class="box">
  <p class="show">Show</p>
  <p class="hide">hide</p>
</div>

<div class="box">
  <p class="show">Show</p>
  <p class="hide">hide</p>
</div>

CSS:

.box {
  display: inline-block;
  width: 150px;
  height: 150px;
  border: 1px solid #000;
}

.hide {
  display: none;
}

jQuery:

$(document).ready(function() {
  $('.box').mouseover(function() {
    $('.hide').show();
    $('.show').hide();
  });
  $('.box').mouseleave(function() {
    $('.hide').hide();
    $('.show').show();
  });
});

Answer 1

使用this 定位“selected”元素，然后用find() 选择子元素。或 children() :

$(document).ready(function() {
  $('.box').mouseover(function() {
    $(this).children('.hide').show();
    $(this).children('.show').hide();
  });
  $('.box').mouseleave(function() {
    $(this).children('.hide').hide();
    $(this).children('.show').show();
  });
});

JSFiddle Demo

编辑，概述提出的性能问题:

有关find 和children 之间区别的基本细节，this answer是一个很好的资源。

在这种情况下，我发现 .find() 整体上更快，通常为 ~.2ms。

经过大量测试，使用 find() 或使用 $('.selector', this) 似乎没有什么区别，或者没有区别>

总的来说，结果是相似的。在某些情况下，$('.selector', this) 似乎较慢，而在其他情况下 find()。

但是，find 确实为您提供了 $('.selector', this) 无法实现的额外功能，例如直接子选择器: .selector > .anotherone，或者缓存jQuery对象来节省资源。

总结:没有太大区别，这完全取决于你的情况，以及你喜欢什么。