2012-04-12 111 views
0

隨着jQuery懸停你如何檢查你是否剛剛在同一個元素上徘徊?假設我有兩個盒子,然後盤旋在盒子1上,然後離開,然後回來並懸停在同一盒子上。我想存儲初始懸停元素的值(方框1),然後比較懸停時是否相同。jQuery懸停在相同的元素

謝謝!

+0

你只想要這個,當你將鼠標懸停你只是徘徊在相同的元素髮生上?或者,如果你不止一次地懸停在任何元素上?這是兩種不同的情況,有兩種不同的解決方案,這兩種解決方案在下面的答案中概述...;) – 2012-04-12 21:01:59

回答

2

嘗試類似下面,

var lastHovered = ''; 

$('#box1').hover(function() { 
    if (lastHovered == 'box1') { 
     alert('You have hovered on this already'); 
    } 
    lastHovered = 'box1'; 

    //Your stuff 
}, function() { 
    //mouse out stuff 
}); 

$('#box2').hover(function() { 
    if (lastHovered == 'box2') { 
     alert('You have hovered on this already'); 
    } 
    lastHovered = 'box2'; 

    //Your stuff 
}, function() { 
    //mouse out stuff 
}); 

注:我用2個功能假設BOX1懸停和BOX2懸停具有完全不同的功能......如果不是你可以把它相同的功能和使用內this.id將它們分組..見下文。

var lastHovered = ''; 

$('#box1, #box2').hover(function() { 
    if (lastHovered == this.id) { //<-- used this.id instead of hard-coded value 
     alert('You have hovered on ' + this.id + ' already'); 
    } 
    lastHovered = this.id; //<-- used this.id instead of hard-coded value 

    //Your stuff 
}, function() { 
    //mouse out stuff 
}); 
+0

如果您將'this'分配給'lastHovered'而不是使用硬編碼值,則可以使用相同的回調這兩個要素。 '$('#box1,#box2')。hover(...' – 2012-04-12 20:59:38

+0

使用'this'是一個很好的建議,但是一個簡單的字符串很小(prob' this.id'是一個好的方法)。 Ans使用相同的懸停函數取決於OP正在嘗試做什麼,每個懸停內可能有完全不同的'stuffs' – 2012-04-12 21:01:07

+1

'this'是一個對象引用,它應該小於一個字符串。 ......取決於情況,可以鏈接懸停並使用'event.stopImmediatePropagation()'來處理這個問題。 – 2012-04-12 21:05:52

0

使用。數據()http://api.jquery.com/data/等首先懸停在回調做一些像

if (!$(this).data('var')) { 
    $(this).data('var','value'); 
} else { 
    console.log($(this).data('var')); 
}; 
+0

好主意,但是$(this)的值每個元素都會變化,訪問'previous hover'。 data()對象會很粗糙 – DefyGravity 2012-04-12 21:06:43

+0

如果你讀到這個問題,那麼所有的海報要求的是再次懸停同一個元素時的一種方式,以跟蹤那個元素已經被徘徊了,他並沒有要求任何地方能夠跟蹤每個元素上的最後一個可以被徘徊的元素,所以.data會做到絕對的那個。這就是爲什麼這個問題有一個評論,這是從來沒有回答。 – GillesC 2012-04-13 06:52:09

0
var lastHovered = null; 
$('#selector1,#selector2,#selector3').hover(function (evt) { 
    if(lastHovered && lastHovered === $(this).attr("id")){ 
//code for 're-hovering' 
    }else{ 
//code for 'new hover' 
    } 
}, function (evt) { 
    //mouse out stuff 
    lastHovered = $(this).attr("id"); 
});