Javascript 将两个变量设置为同一dom元素时,jquery语句的计算结果不为true

Javascript 将两个变量设置为同一dom元素时,jquery语句的计算结果不为true,javascript,jquery,if-statement,Javascript,Jquery,If Statement,我正在尝试处理mouseover/mouseout动画,当您将鼠标悬停在先前鼠标悬停的元素上时,我的一条语句的计算结果不是真的。我正试图阻止双重翻转动画的发生。这是我的密码: var $chosenThumb = null; var $lastThumb = null; $('.thumb_img').mouseover(function(){ if ($chosenThumb != null){ $lastThumb = $chosenThumb;

我正在尝试处理mouseover/mouseout动画,当您将鼠标悬停在先前鼠标悬停的元素上时,我的一条语句的计算结果不是真的。我正试图阻止双重翻转动画的发生。这是我的密码:

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将为空,chosenThumb将是您翻过的拇指。然后,下次将鼠标移到该拇指上时,lastThumb应等于chosenThumb,但log语句的计算结果不为true。为什么?

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

即使使用相同的选择器,每个jQuery对象都是
jQuery
的新实例。要比较元素,必须比较实际的DOM元素:

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

一般来说,由于内存泄漏,扩展DOM元素是不明智的,但如果没有大量节点,我可能建议您在这种情况下这样做

这将防止鼠标悬停事件在触发一次后触发:

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