Как настроить таргетинг только на текущий элемент в jQuery

Question

Я пытаюсь выяснить, как нацелить элемент при наведении, но дело в том, что он разделяет тот же класс с другим элементом на странице.

Вот что я делаю ... я 'я работаю над страницей wooccomerce, на которой я установил класс entry_title равным nowrap, чтобы длинные заголовки могли быть в одной строке, но я хочу сделать так, чтобы при наведении курсора на пользователя с длинным заголовком отображался полный заголовок(т.е. добавьте класс к элементу и установите white-space: normal)

Ниже приведен CSS, который я использую, чтобы сделать заголовок одной строкой с эллипсами

.woocommerce .product h4.entry-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: .3s;
}
.show_ftitle {
    white-space: normal !important;
}

Тогда jQuery имеет видfollow

jQuery(document).ready(function($) {
    $('.wf-cell').hover(function() {
        $('.entry-title').addClass('show_ftitle');
    }, function() {
        $('.entry-title').removeClass('show_ftitle');
    });
});

Теперь проблема в том, что, если я наведу курсор мыши на какой-либо продукт ... появится название длинного продукта (в котором я не парил).только хочу, чтобы он работал для текущего элемента наведения.но у меня есть только class для работы.Есть ли способ, которым я могу указать это и заставить его работать только для продукта, на котором находится мой курсор.

Спасибо

Answer 1

Нет необходимости в JavaScript, просто сделайте это с помощью css hover

.wf-cell:hover .entry-title {
  white-space: normal !important;
}

Проблема с вашим кодом в том, что вы выбираете все элементы, а не тот, который вы используете

$('.wf-cell').hover(function() {
  $(this).find('.entry-title').addClass('show_ftitle');
}, function() {
  $(this).find('.entry-title').addClass('show_ftitle');
});

Answer 2

Вы можете просто добавить this с запятой после класса.Пример использования вашего кода ниже:

jQuery(document).ready(function($) {
$('.wf-cell').hover(function() {
    $('.entry-title', this).addClass('show_ftitle');
}, function() {
    $('.entry-title', this).removeClass('show_ftitle');
});

});

Надеюсь, это поможет.