jQuery - 写这个语句的另一种方法(DRY)

时间:2015-07-01 05:15:34

标签: javascript jquery dry prop

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

目前,这很好用。但是我试图弄清楚如何利用DRY方法而且我不喜欢道具被写两次的事实。

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

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

3 个答案:

答案 0 :(得分:4)

您可以将.animatedDiv { width: 820px; height: 312px; background-image: url("https://cf.dropboxstatic.com/static/images/index/animation-strips/hero-intro-bg-vflR5rUow.jpg"); -webkit-animation: play 2s steps(48) infinite; -moz-animation: play 2s steps(48) infinite; -ms-animation: play 2s steps(48) infinite; -o-animation: play 2s steps(48) infinite; animation: play 2s steps(48) infinite; } @-webkit-keyframes play { from { background-position: 0px; } to { background-position: -39360px; } } @-moz-keyframes play { from { background-position: 0px; } to { background-position: -39360px; } } @-ms-keyframes play { from { background-position: 0px; } to { background-position: -39360px; } } @-o-keyframes play { from { background-position: 0px; } to { background-position: -39360px; } } @keyframes play { from { background-position: 0px; } to { background-position: -39360px; } } 迁移到内部条件中以设置属性

if..else

此外,如果您正在处理现代浏览器,则可以使用$( '#input-code' ).on( 'change keyup paste', function() { $( '#submit-btn' ).prop( 'disabled', this.value !== $( "#random-code" ).text() ); }); 代替on('input'。检查浏览器支持。

答案 1 :(得分:3)

您可以直接在#include <opencv2/opencv.hpp>

中使用否定表达式

当按钮文字和prop内的disable相同时,这将是text按钮。

请确保#random-code trim删除前导和尾随空格,否则它将与按钮文字不匹配。

text()

OR

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

答案 2 :(得分:0)

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

有关详细信息,请查看此处... Jquery prop() detail.....