使用jQuery切換元素類？

我一直有這個代碼使用jQuery切換元素類？

$("#click").bind('mousedown mouseup mouseover', function(e) { 
    if(e.type === 'mouseover'){ 
     $(this).addClass('open'); //works! 
    } 
    if(e.type === 'mousedown'){ 
     $(this).removeClass().addClass('closed'); //works! 
    } 
    if(e.type === 'mouseup'){ 
     $(this).removeClass().addClass('open'); 
     // The above line doesn't work :(
    } 
});

Demo here 此代碼僅適用於鼠標懸停，鼠標按下和不的鼠標鬆開一些問題。當我取消$(this).removeClass().addClass('open');的註釋時，mousedown事件也會停止觸發。

任何人都有一個想法可能是什麼問題？

來源

2011-09-11 Mohammad

修正：http://jsfiddle.net/U544t/2/

您需要刪除你不想要的類，然後添加你的類。你最後得到的div有open和closed，因此它只顯示封閉的圖標。

來源

2011-09-11 02:48:29 Joe

在Chrome中，當mousedown時不更改圖標，即使類正確更改 – bcoughlan

非常正確。我已經仔細研究了一下，這似乎是Chrome/Safari的一個問題。建議的修正發佈在http://forum.jquery.com/topic/chrome-text-select-cursor-on-drag上，但似乎不適用於我。仍然在尋找:) – Joe

這裏似乎有一個工作實現http://candrews.net/sandbox/spryMap/然而，我不明白如何實現它，也許你會這樣做：） – Mohammad

除非我錯過了一些東西，看起來你可以用toggleClass()更有效地做到這一點，而不是自己做所有的添加/刪除。你可能不需要兩個類，只是一個默認狀態，而.open類在切換時觸發活動。

來源

2011-09-11 04:53:14

所有這一切都是真的，但我們是試圖讓它起作用，優化它很快就會到來：） – Mohammad

使用jQuery切換元素類？

回答

相關問題