Javascript 在select类上使用jQuery并不是所有div都具有相同的类

我不知道如何在标题中表达。无论如何，我要说的是，我有三个div具有相同的类名。我想添加一个mouseover函数，它只对select div有效，而不是一次对所有div有效。例如：这将显示/隐藏所有div，我只希望所选的div对jQuery函数起作用

Html:

jQuery：

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

使用此选项以选定元素为目标，然后使用或选择子元素：

编辑，概述提出的性能问题： 有关find和children之间差异的基本详细信息，请参阅

在这种情况下，我发现.find作为一个整体速度更快，通常为~.2ms

经过广泛的测试，使用find或使用$'.selector'这两种方法之间似乎没有什么区别

总的来说，结果是相似的。在某些情况下，它显示为$'.selector'，在另一些情况下则较慢

但是，find确实提供了使用$'.selector'无法实现的额外功能，例如直接子选择器：.selector>.anotherone，或者缓存jQuery对象以节省资源

小结：没有太大区别，这完全取决于您的情况，以及您喜欢什么。将语法更改为

$'.box'.mouseoverfunction{ $this.find'.hide'.show； $this.find'.show'.hide； };

---

只需使用$this从触发事件的当前元素导航到其子元素，并在选择器中添加一个'this'

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

例如：

因此，基本上您必须选择鼠标悬停元素的子选择器

注意：-您也可以使用find&childrenjqueryapi来完成此操作。但它比直接选择要慢一点

为什么不使用纯css呢？参见下面的示例

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

---

示例：

问题在于，选择器的目标是文档中具有该类名的所有div。您需要将范围限制为您所关心的框中的div。一种方法是

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

而不是

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

---

请参见此处

您可以在CSS中完成这一切：

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

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

例如：

如果您真的想在JavaScript中执行此操作，只需使用$this并查找：

更多关于儿童或儿童是否能更快找到的信息

$.box.mouseoverfunction{ $this.find.hide.show； $this.find.show.hide； }; $.box.mouseleave函数{ $this.find.hide.hide； $this.find.show.show； }; .盒子{ 显示：内联块； 宽度：150px； 高度：150像素； 边框：1px000； } .隐藏{ 显示：无； }

show

hide

show

hide

show

hide

您可以看到：$'.box'全选.box div。 因此，$'.hide'选择all.hide p=>当您单击一个框时，all.hide p会受到影响。 您可以按照以下代码进行修复：

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

---

这太完美了。一旦它允许，我会接受的。谢谢大家!@Jacob，找不到，孩子们比直接选择器$'慢。选择器'，这个？如果我没有错的话，他们正在调用另一个jQueryAPI。@JeradRutnam对于这个特定的例子，那么一个明确的可能。我分析了这两个函数，结果非常接近，在几分之一毫秒内，直接选择通常快1/10到2/10毫秒。但是，使用children或find可以在选择器中提供更多的多样性，例如只选择元素的直接子元素。嘿，谢谢你的帮助。这绝对是我需要的。

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

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

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

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