jQuery - Другой способ написать это утверждение (DRY)

Question

Мне интересно, есть ли способ написать следующий код без if/else.

В настоящее время это работает нормально. Но я пытаюсь понять, как я могу использовать метод СУХОЙ, и мне не нравится тот факт, что опора написана дважды.

У меня есть текстовое значение, и пользователю необходимо ввести этот код в текстовое поле. Как только значения совпадают, он «включает» кнопку отправки, иначе она отключит ее.

$('#input-code').on('change keyup paste', function() { 
    if ($(this).val() == $("#random-code").text()) { 
    $('#submit-btn').prop('disabled', false); 
    } else { 
    $('#submit-btn').prop('disabled', true); 
    } 
}); 

Answer 1

Вы можете перенести if..else в внутреннее состояние, чтобы установить атрибут,

$('#input-code').on('change keyup paste', function() { 
    $('#submit-btn').prop('disabled', this.value !== $("#random-code").text()); 
}); 

Кроме того, если вы имеете дело с современными браузерами, вы можете просто использовать on('input' вместо 'change keyup paste'. Однако проверьте поддержку браузера.

Answer 2

Вы можете использовать отрицательное выражение непосредственно в prop.

Это будет disable кнопка, когда текст кнопки и text внутри #random-code будут такими же.

Удостоверьтесь, что trimtext(), чтобы удалить ведущие и конечные пробелы, в противном случае оно не будет соответствовать тексту кнопки.

$('#input-code').on('change keyup paste', function() { 
    $('#submit-btn').prop('disabled', !($(this).val() == $.trim($("#random-code").text()))); 
}); 

ИЛИ

$('#input-code').on('change keyup paste', function() { 
    $('#submit-btn').prop('disabled', $(this).val() !== $.trim($("#random-code").text())); 
    //            ^^^ 
}); 

Answer 3

$('#input-code').on('change keyup paste', function() { 
    $('#submit-btn').prop('disabled', function(){ 
      return ($(this).val() == $("#random-code").text()); 
    }); 
}); 

более подробно вы можете посмотреть здесь ... Jquery prop() detail.....