Question

我有一个span和一个输入字段，当输入字段为空时，我需要跨度来表示“空”。当我在字段中输入一些文本时，跨度将自动将字母/数字添加到范围。如果输入值被删除，则范围将再次显示为“空”。

if($.trim($('#input').val()) == ''){
    $('#span').html('Empty');
}
$('#input').bind("change keyup input",function() { 
    $('#span').html($(this).val());
    if($.trim($('#input').val()) == ''){
        $('#span').html('Empty');
    }
});

我认为这可以用更简单的方式实现，希望只在一个函数中实现。这有可能吗？

Answer 1

很简单：使用函数设置#span元素的HTML，并在运行时和绑定到#input字段的某些事件期间执行该函数。我建议使用.on()代替.bind()：

// Define function that sets html value
var updateSpan = function() {
  var v = $.trim($(this).val());
  if(v === '') {
    $('#span').html('Empty');
  } else {
    $('#span').html(v);
  }
}

// Execute function at runtime
// We use .call() so that `this` in the function refers to our input
updateSpan.call($('#input')[0]);

// Bind the function as a callback during these events, too
// The element is automatically passed as `this`
$('#input').on('change keyup input', updateSpan);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input" />
<span id="span"></span>

如果您真的喜欢混淆代码，您甚至可以将if语句缩短为：

var updateSpan = function() {
    var v = $.trim($(this).val());
    $('#span').html(v === '' ? 'Empty' : v);
}

Answer 2

$('#input').on("change keyup input",function() { 
    if($.trim($('#input').val()) == ''){
        $('#span').html('Empty');
    } else {
        $('#span').html($(this).val());
    }
});

Answer 3

是的，在我能想到的几乎所有情况下，你真的只需要键盘，我的头脑。

您可以将.bind替换为.on，将触发器替换为'keyup'。

创建函数后，您可以通过触发其中一个触发器来调用它，同时仍然使用相同的选择器。

像这样;

$('#input').on('keyup', function(){
    text = $(this).val().trim();
    if(text == ''){
        $('#span').html('Empty');
    } else {
        $('#span').html(text);
    }
}).trigger('keyup');

或者您可以定义类似的函数;

$.fn.emptyCheck = function(){
        return (this.val().trim() != '');
}

或

$.fn.emptyCheck = function(){
    text = this.val().trim();
    if(text == ''){
        $('#selector').html('Empty');
    } else {
        $('#selector').html(text);
}

然后使用

调用它

$('input').on('keyup', function(){
      if($(this).emptyCheck()){
          /* your function */ 
      }
});

或

$('input').on('keyup', function(){
    $(this).emptyCheck();
}

分别

Answer 4

这应该可以解决问题：

$('#input')
    .bind("change keyup input", function() { 
        updateSpan($(this).val());
    })
    .trigger('keyup');

function updateSpan(s) {
    $('#span').html(s.trim() == '' ? 'Empty' : s);
}

最终.keyUp()确保事件被触发一次，因此初始化了范围。

你可以用更少的代码来写这个。但是，我认为这是一个很好的妥协。你可以一次阅读它，不必解密复杂的表达式，也没有冗余。

任何人都可以帮助我使这个脚本更简单吗？

4 个答案: