Как добавить и удалить класс между этим кодом jQuery?

Question

Как добавить и удалить класс между этим кодом jQuery?

0

У меня есть эти сценарии, которые включают или отключают кнопку отправки. Моя проблема здесь в том, что я хочу удалить текущий класс (желтый) и добавить новый (зеленый), если входы не пустые. Также значение кнопки, которую я хочу изменить, "Заказать сейчас!" продолжать!". Я пробовал проверять поля с помощью if-statement, но это не сработало, единственная часть, на которую я могу работать, - это не работает, или нет.

Моя кнопка отправки выглядит так:

<input type="submit" class="submit-order-btn yellow" value="Order now!">

Мой jQuery выглядит так:

var $submit = $('.submit-order-btn'),
    $inputs = $('input[type=text]');

function checkEmpty() {
    return $inputs.filter(function() {
        return !$.trim(this.value);
    }).length === 0;
}

$inputs.on('blur keyup', function() {
    $submit.prop("disabled", !checkEmpty());
}).blur();

// DEBUG BEGIN \\
$submit.on("click", function() {
        alert("Submitted");
});
// DEBUG END \\

Dueify 31 март 2014, в 15:52

Источник

0

checkEmpty() ли checkEmpty() ? Или вам нужна помощь, чтобы выяснить это?
Genie 31 март 2014, в 13:08
0

Это работает отлично :) думал, что я не могу понять, как добавить / удалить классы CSS между ними.
Dueify 31 март 2014, в 13:17

Теги:

javascript

jquery

3 ответа

0

Вы имеете в виду что-то вроде .addClass('') и .removeClass('')? Пример: http://fiddle.jshell.net/AJLsz/

kpull1 31 март 2014, в 11:28

0

Да, именно так, как я пытался с обоими, и я не мог заставить его работать. Я использую ваше решение, спасибо, парень.
Dueify 31 март 2014, в 13:23

0

вы можете сделать это только с помощью css:

.yellow{
    background-color:green;
}
input[type="submit"]:disabled{
    background-color:yellow;
}

см. здесь: http://jsfiddle.net/FR75Q/

haxxxton 31 март 2014, в 11:01

0

Да, конечно, это отличное решение :)
Dueify 31 март 2014, в 13:17
0

рад, что смог помочь пожалуйста, не забудьте пометить ответ на свой вопрос, чтобы другие могли найти его в случае необходимости :) спасибо
haxxxton 31 март 2014, в 13:20

Ещё вопросы

checkEmpty() ли checkEmpty() ? Или вам нужна помощь, чтобы выяснить это?
Это работает отлично :) думал, что я не могу понять, как добавить / удалить классы CSS между ними.
Да, именно так, как я пытался с обоими, и я не мог заставить его работать. Я использую ваше решение, спасибо, парень.
Да, конечно, это отличное решение :)
рад, что смог помочь пожалуйста, не забудьте пометить ответ на свой вопрос, чтобы другие могли найти его в случае необходимости :) спасибо

Genie · Accepted Answer · 2014-03-31T10-22-00.000Z

Я не понимаю, когда вы хотите, чтобы класс и изменение ценности произошли, вы имеете в виду вот так?

$inputs.on('blur keyup', function() {
    $submit.prop("disabled", !checkEmpty());

    if (!checkEmpty()) {
        $submit.removeClass('yellow').addClass('green');
        $submit.val('Proceed!');
    } else {
        $submit.removeClass('green').addClass('yellow');
        $submit.val('Order now!');
    }
}).blur();