選擇單個元素的正確語法是什麼？

Question

在這種情況下，當我將鼠標懸停在任何列上時，頁面中的所有元素都會淡入。我如何才能只使用當前懸停的元素淡入而不休息？

$('.column1, .column2, .column3, .column4, .column5').mouseenter(function() { 
    $(".p1").fadeIn(200); 
    $(this).animate({ 
     height: '100%' 
    }); 
}); 


$('.column1, .column2, .column3, .column4, .column5').mouseleave(function() { 
    $(".p1").fadeOut(200); 
    $(this).animate({ 
     height: '100px', 
    }); 
}); 

Answer 1

使用this關鍵字來引用觸發事件的元素，像這樣：

$('.column1, .column2, .column3, .column4, .column5').mouseenter(function() { 
    $(this).fadeIn(200).animate({ 
     height: '100%' 
    }); 
}); 

$('.column1, .column2, .column3, .column4, .column5').mouseleave(function() { 
    $(this).fadeOut(200).animate({ 
     height: '100px' 
    }); 
}); 

另外請注意，您可以通過使用上的所有元素的公共類縮短代碼，使用hover()處理程序和fadeToggle()。試試這個：

$('.column').hover(function() { 
    $(this).fadeToggle(200).animate({ 
     height: $(this).height() == 100 ? '100%' : '100px' 
    }); 
});