Каков правильный синтаксис для выбора отдельных элементов?

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