将两个变量设置为相同的dom元素时，jquery语句未评估为true

Question

我正在尝试处理鼠标悬停/鼠标移动动画，并且当我将鼠标悬停在之前鼠标悬停的元素上时，我所评论的声明并未评估为真。 我正在尝试阻止双翻转动画的发生。 这是我的代码：

var $chosenThumb = null;
var $lastThumb = null;

$('.thumb_img').mouseover(function(){

    if ($chosenThumb != null){
        $lastThumb = $chosenThumb;
        $lastThumbContainer = $chosenThumb.parent();
        $lastThumbOverlay = $lastThumbContainer.children('.thumb_overlay');
    }

    $chosenThumb = $(this);

    console.log($lastThumb + "|" + $chosenThumb + "|" + ($lastThumb == $chosenThumb));

    $chosenThumbContainer = $(this).parent();
    $chosenThumbOverlay = $chosenThumbContainer.children('.thumb_overlay');

    if ($lastThumb != null && $lastThumb != $chosenThumb){
        $lastThumbOverlay.animate({ 'height' : '0px'}, 200);
        $lastThumbContainer.children('.thumb_plus').animate({'height' :'0px', 'width' : '0px' },200);
    }

    if ($lastThumb != $chosenThumb) {
        $chosenThumbOverlay.animate({ 'height' : '30px'}, 200);
        $chosenThumbContainer.children('.thumb_plus').animate({'height' :'31px', 'width' : '31px' },200);
    }
});

因此，当您第一次将鼠标悬停在缩略图上时，lastThumb将为null并且selectedThumb将是您翻转的拇指。 然后，当您下次将鼠标悬停在该拇指上时，lastThumb应该等于selectedThumb，但是log语句不会评估为true。 为什么？

Answer 1

即使是相同的选择，每一个jQuery对象是一个新实例jQuery 。 要比较元素，您必须比较实际的DOM元素：

//$lastThumb[0] returns the first DOM element from the jQuery selector
$lastThumb[0] == $chosenThumb[0]

Answer 2

通常，由于内存泄漏而扩展DOM元素是不可取的，但如果您没有大量节点，我可能会建议您在这种情况下执行此操作。

这将阻止mouseover事件在触发一次后触发：

$( "myselector" ).mouseover( function( )
{
  if ( this.moused )
  {
    return;
  }
  else
  {
    this.moused = true;
  }
  // Do things here.
} );

Answer 3

可能是您的HTML中有两个具有相同ID的span或div