個々の要素を選択する正しい構文は何ですか？

Question

この例では、ページのフェードインの.p1要素のすべての列にカーソルを合わせると、現在どの要素をフェードインに持ち越して残りの部分ではないのですか？

$('.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' 
    }); 
});