Question

不确定如何在标题中说出来。无论如何，我所说的是我有三个具有相同类名的div。我想添加一个只能在select 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定位“已选中”元素，然后选择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

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

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

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

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

如果您真的想在JavaScript中使用，只需使用$(this)和find()：

关于children()或find()是否更快的更多information。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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（）＆amp; 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

将语法更改为

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

使用$(this)

从当前元素导航到其子元素

Answer 5

问题是您的选择器定位文档中具有该类名的所有div。您需要将范围限制为您关注的框内的div。一种方法是

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

而不是

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

请参阅此处https://jsfiddle.net/1y2jw2y0/1/

Answer 6

您可以看到：$('.box')选择所有.box div。因此$('.hide')选择所有.hide p =＆gt;当您点击某个框时，所有.hide p都会受到影响。您可以修改如下代码：

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

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

6 个答案:

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

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