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

Question

不太清楚如何在标题中表达这一点。无论如何，我要说的是我有三个具有相同类名的 div。我想添加一个仅适用于选择 div 的鼠标悬停功能，而不是一次全部。例如 :(https://jsfiddle.net/1y2jw2y0/) 这使得所有 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 定位“选定”元素，然后使用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 对象以节省资源。

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

Answer 2

把你的语法改成

$('.box').mouseover(function() { $(this).find('.hide').show(); $(this).find('.show').hide(); });

只需使用$(this)从触发事件的当前元素导航到其子元素

Answer 3

在选择器中添加一个“this”，

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

示例：https://jsfiddle.net/1y2jw2y0/6/

所以基本上你必须选择鼠标悬停元素的子选择器。

注意：- 您也可以使用 find() 和 children() jquery API 来做到这一点。但是比直接选择要慢一些。

为什么不使用纯 CSS 呢？请看下面的例子，

.box {
   display: inline-block;
   width: 150px;
   height: 150px;
   border: 1px solid #000;
}
.hide,
.box:hover > .show {
   display: none;
}
.box:hover > .hide {
   display: block;
}

示例：https://jsfiddle.net/1y2jw2y0/3/

Answer 4

问题是您的选择器针对的是文档中具有该类名称的所有 div。您需要将范围限制在您关心的框内的 div 内。一种方法是

$(this).find('.hide').show()

代替

$(".hide").show();

请看这里https://jsfiddle.net/1y2jw2y0/1/

Answer 5

您可以在 CSS 中完成所有操作：

.box:hover .hide {
  display: block;
}

.box:hover .show {
  display: none;
}

示例：http://jsfiddle.net/Zy2Ny/

如果你真的想用 JavaScript 来做，只需使用 $(this) 和 find()：

更多information 了解children() 或find() 是否更快。

$(".box").mouseover(function() {
    $(this).find(".hide").show();
    $(this).find(".show").hide();
});

$(".box").mouseleave(function() {
    $(this).find(".hide").hide();
    $(this).find(".show").show();
});

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

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxes">

  <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>
  
</div>

例如：https://jsfiddle.net/1y2jw2y0/5/

Answer 6

可以看到：$('.box')全选.box div。 这样$('.hide') 全选.hide p => 当您单击一个框时，所有.hide p 都会受到影响。 您可以修复如下代码：

$(this).select('.hide').hide()
$(this).select('.show').show()