使用jquery識別懸停元素而不使用id？

Question

有沒有辦法讓jQuery知道你剛剛推出了哪個div而沒有使用id？

基本上我有類似以下情況：

如果用戶將鼠標懸停在div上，則會變為紅色。 如果用戶將鼠標懸停在另一個div上，則所有div都將變為白色（基本上重置所有內容），當前懸停在div上的紅色變為紅色。 但是，如果用戶翻過div將其變為紅色，然后將其翻出並返回到同一個div中，我不希望它返回白色然后變為紅色。

Answer 1

鼠標懸停時添加一個類，然后再次鼠標懸停時檢查該類是否存在。 如果它沒有，那么從所有div中清除該類。 如果您不想使用類，可以使用.data和.removeData ：

$('div').on('mouseover', function() {       
    if (!$(this).hasClass('red')) {
       $('div').removeClass('red');
    }
    $(this).addClass('red'); 
});

JSFiddle示例

Answer 2

在盤旋時，給它一個臨時課：

$(this).addClass();

然后，當您准備刪除它時使用：

$(this).removeClass();

Answer 3

不要用：

HTML：

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

JS：

$("div span").click(function(){
  $(this).closest("div").find("span").not(this).css("background", "#fff");
  $(this).css("background", "#f00");
});

Answer 4

這是另一個解決方案： http ： //jsfiddle.net/adeneo/ep39L/1/

var last;

$('div').mouseenter(function(e) {
    var elm = $(e.target);
    if (last != elm) {
        $('div').css('background', 'white');
        elm.css('background', 'red');
    }
    last=elm;
    $('div').eq(2).html(last.index()+1);
});