JQuery изменить CSS элемента, когда другой элемент становится активным

Question

Я пытаюсь изменить цвет фона метки, примыкающей к элементу ввода, когда ввод становится «активным».

Это должно сработать как для нажатия на вход, так и для перехода между элементами ввода.

Я смог заставить это работать, если пользователь нажал на ввод, но мое решение не сработало, если пользователь вставил вкладку в элемент ввода.Я также должен был повторить код для каждого элемента ввода.Учитывая, что у меня может быть довольно много элементов ввода, я решил, что должен быть более изящный способ?

Вот ссылка с базовым HTML + CSS.

http://jsfiddle.net/xXqhH/

Answer 1

Если я понял, что вы пытаетесь сделать правильно, просто привяжите обработчики событий к событиям focusin и focusout.Вы можете использовать prev, чтобы найти непосредственно предшествующего брата, и css, чтобы установить свойство CSS:

$("input").focusin(function() {
    $(this).prev("label").css("background-color", "red");
}).focusout(function() {
    $(this).prev("label").css("background-color", "gray");
});

Вот обновленный скрипка .

Answer 2

Я солгал в своем комментарии - я собираюсь написать это с нуля.Я полагаю, что проблема, с которой вы работали при нажатии, но не с табуляции, была связана с использованием функции .click() jQuery.Использование .focus() вместо этого вместе с классом CSS должно обеспечить желаемый результат:

jQuery code:

$('input:text').focus(function(e) {
    $('label').removeClass('active');
    $(this).prev('label').addClass('active');
});

Дополнительный CSS:

label.active {
    background: red !important;
}

Рабочая демоверсия