Почему не применяется стиль к предку?

Question

[Алексей]

Народ, приветствую!

Туплю по-чёрному. Хочу, чтобы по наведению на ссылку (вопрос FAQ в bootstrap accordition) менялся фон всего блока:

$('#faq-list a').on('mouseover', function(e) {
    e.preventDefault;
    $(this).css('color', 'white');
    $(this).parent('.card-header').css('background-color', 'black');
});

Ничего не происходит. Что не так делаю?

Ссылка на секцию https://codepen.io/alexej-trikoz/pen/bJMoOY

Answer 1

[Andrew]

$('#faq-list a').on('mouseover', function(e) {
    e.preventDefault();
    $(this).css('color', 'white');
    $(this).parent('.card-header').css('background-color', 'black');
});

Comments

[Алексей]

Спасибо за оперативный ответ! Уже сообразил насчёт особенностей синтаксиса this в jquery и поправил сам. Но стиль всё-равно не применяется!

[Andrew]

Алексей, html?

[Алексей]

Andrew, https://codepen.io/alexej-trikoz/pen/bJMoOY

[Moses Fender]

Алексей, Ну так у тебя parent - h5, а не div.card-header.

Answer 2

[0xD34F]

$(this).parent('.card-header')

А точно родительский элемент имеет класс card-header? - если нет, вызывайте parent без параметра. Или может быть класс есть, но элемент не родительский, а находится выше? - тогда замените parent на closest.

Comments

[Алексей]

Поправил вопрос - добавил ссылку на копию кода

[0xD34F]

Алексей, ну да, элемент не родительский. Меняйте parent на closest.

[Алексей]

Изменил на closest - ничего

[0xD34F]

Алексей, а jquery подключить не забыли? Да конечно забыли.

[Алексей]

0xD34F, Можно вопрос в догонку?

Хочу чтобы состояние заливки сбрасывалось. Для этого пишу функцию для определения аттрибута ссылки

function GetFaqAriaExpand() {
    var fa = $(this).prop('aria-expanded');
    return fa;
};

$('#faq-list a').on('mouseover click', function(e) {
    e.preventDefault;
    $(this).addClass('text-white');
    $(this).closest('.card-header').addClass('bg-dark');
});

$('#faq-list a').on('mouseout', function(e) {
    e.preventDefault;
    var fa = GetFaqAriaExpand();
    console.log ('fa: ' + fa)
    if (fa) {
        return;
    } else {
        $(this).removeClass('text-white');
        $(this).closest('.card-header').removeClass('bg-dark');
    }
});

А в консоли fa: undefined

[0xD34F]

Алексей, ну, всё правильно. С чего вы решили, что this в обработчике mouseout и в GetFaqAriaExpand будет один и тот же? Не будет. Передавайте элемент в качестве параметра:

function GetFaqAriaExpand(el) {
  var fa = $(el).prop('aria-expanded');
  ...


var fa = GetFaqAriaExpand(this);

Или устанавливайте контекст при вызове:

var fa = GetFaqAriaExpand.call(this);

А, ну и ещё вместо prop наверное надо всё-таки attr использовать.

[Алексей]

0xD34F, Спасибо за науку - совсем не подумал, что контекст разный. Но не работает (((

fa: undefind

[0xD34F]

Алексей, если кроме "не работает" вам сказать больше нечего - лучше молчите. И раз уж вы решили оформить это дело как отдельный вопрос, там и продолжим разговор.