jQuery

Question

我想知道是否有一种方法可以在没有 if / else 的情况下编写以下代码。

目前，这工作正常。但我想弄清楚如何利用 DRY 方法，我不喜欢这个道具被写了两次。

我有一个文本值，用户需要将该代码输入到文本框中。一旦值匹配，它 "enables" 提交按钮，否则禁用它。

$( '#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

可以直接在prop中使用否定表达式。

当按钮文本和 #random-code 中的 text 相同时，这将 disable 按钮。

确保您 trim text() 删除了前导和尾随空格，否则它将与按钮文本不匹配。

$('#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 2

您可以将 if..else 迁移到内部条件中以设置属性，

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

此外，如果您使用的是现代浏览器，则可以只使用 on('input' 而不是 'change keyup paste'。不过请检查浏览器支持。

Answer 3

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

有关详细信息，您可以在此处查看... Jquery prop() detail.....

jQuery - 另一种写这个语句的方法（DRY）

jQuery - Another way to write this statement (DRY)

javascript

dry

prop