Fatal编程技术网
  • javascript/
  • Javascript 为什么在单击时正确调用$（this），而在悬停时则不正确？

Javascript 为什么在单击时正确调用$（this），而在悬停时则不正确？

javascript jquery

Javascript 为什么在单击时正确调用$（this），而在悬停时则不正确？,javascript,jquery,Javascript,Jquery,为什么这是按元素工作的 <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> &l

为什么这是按元素工作的

<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>


$（文档）.ready（函数（）{
$（“p”）。单击（函数（）{
$（this.hide（）；
});
});
如果你点击我，我就会消失

点击我走开

也点击我
如果你点击每一个，它就会消失

但是如果我用鼠标悬停来编码

<script>
$(document).ready(function(){
  $("p").hover(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>


$（文档）.ready（函数（）{
$（“p”）.hover（函数（）{
$（this.hide（）；
});
});
如果你点击我，我就会消失

点击我走开

也点击我
它们一起消失了。有什么区别吗？

尝试将鼠标悬停在底部元素上，它只会删除正确的元素

您认为它会删除所有元素的原因是，它会删除最上面的元素，然后它们会移动到最上面，然后它会很快地依次删除所有元素。

这是因为当您将鼠标悬停在第一个
元素上方时，它会消失，因此，第二个
元素向上移动以取代它的位置-此过程重复，直到所有
元素都隐藏起来，因为您的鼠标将始终悬停在它们上方。
问题是，当每个
p
被移除时，下一个
p
将向上移动到鼠标下方。如果您首先将鼠标悬停在底部，您将看到只有一个被删除


脚本没有问题。小提琴：
如果您尝试从底部悬停
p
标记，您将知道在拍摄中没有任何错误。你的
p
标签消失了，因为在悬停下面的
p
标签只是在上面移动并占据第一位，这实际上很难注意到。您可以尝试在每个
p
标记处记录以控制台事件


由于每个元素都会向上移动，所以鼠标会在下一个元素上悬停，从而将其删除。为了缓解这种情况，可以通过让新元素保持相同的空间而不可见，从而避免将新元素向上移动：


$("p").hover(function () {
    $(this).css("visibility", "hidden");
});



您是否检查过以确保使用的是最新版本？我试过了，效果如预期