Оператор jquery не оценивается как true при установке двух переменных в качестве одного и того же элемента dom

Question

Я пытаюсь обработать анимацию при наведении курсора мыши, и у меня есть утверждение, которое не оценивается как true, когда вы наводите курсор мыши на элемент, над которым вы ранее навели курсор мыши. Я пытаюсь предотвратить анимацию двойного ролловера. Вот мой код:

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 из-за утечек памяти, но я мог бы предложить вам сделать это в этом случае, если у вас нет большого количества узлов.

Это предотвратит запуск события наведения мыши, если оно было запущено один раз:

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

Answer 3

Может быть, у вас есть два span или div с одинаковыми идентификаторами в вашем HTML