Второе действие не работает по клику

Я хочу div изменить на зеленый цвет, когда я нажимаю на checkboxзатем снова, когда я нажимаю флажок, зеленый цвет должен быть удален. Когда я добавлю $('div.formfld').removeClass('green'); действие добавления зеленого цвета также исчезает.

Вот код:

<head>
    <script>
        $(document).ready(function(){
            $(".clicker").click(function(){
                $('div.formfld').addClass('green');
                $('div.formfld').removeClass('green'); 
            });
        });
    </script>

    <style>
        .formfld{ padding:5px; }
        .grey{ background-color:#CCCCCC; }
        .green{ background-color:#006600; }
    </style>
</head>

<body>
    <div class="formfld grey" id="frm">
        <input type="checkbox" class="clicker" /> 
        Name
    </div>
</body>
Источник

3 ответа

Вы оба добавляете, а затем удаляете класс для каждого клика. использование toggleClass вместо. Кроме того, используйте change событие для элемента, чтобы обеспечить доступ для пользователей, которые не могут использовать мышь:

$(".clicker").change(function(){
    $('div.formfld').toggleClass('green');
});

Пример скрипки

Источник

Попробуйте .toggleClass()

$('div.formfld').toggleClass('green');
Источник

Вам нужно использовать toggleClass() для переключения класса

jQuery(function ($) {
    $(".clicker").click(function () {
        $('div.formfld').toggleClass('green');
    });
});

Демо: скрипка

Источник
Другие вопросы по тегам