Класс кнопки изменения поля ввода JQuery

Question

У меня следующая форма:

<input name="q" value="" class="qa-search-field">
<input type="submit" value="Search" class="qa-search-button">

Я пытаюсь изменить класс кнопки отправки, когда поле qa-search-active активно, добавив класс .qa-search-button-active, а затем удалите ее, если форма поиска не активна, то есть курсор там не мигает.

Не могу понять, как закодировать это в Jquery.

Answer 1

$('document').ready(function(){
    $('input[name="q"]').focus(function(event){
        $('input[type="submit"]).attr('class', 'qa-search-button-active');
    });


    $('input[name="q"]').focus(function(event){
        $('input[type="submit"]).attr('class', 'qa-search-button');
    });
});

Answer 2

$(".qa-search-field").focusin(function() {
   $('.qa-search-button').addClass('.qa-search-button-active');
});

(".qa-search-field").focusout(function() {
   $('.qa-search-button').removeClass('.qa-search-button-active');
});

Answer 3

Как насчет этого позднего решения? :)

$(".qa-search-field").focus(function () {
    $('.qa-search-button').removeClass('qa-search-button').addClass('qa-search-button-active');
});

$(".qa-search-field").blur(function () {
    $('.qa-search-button-active').removeClass('qa-search-button-active').addClass('qa-search-button');
});