Jquery 有人能帮我简化这个脚本吗?

Jquery 有人能帮我简化这个脚本吗?,jquery,html,bind,trim,Jquery,Html,Bind,Trim,我有一个span和一个输入字段,当输入字段为空时,我需要它的span来表示“empty”。当我在字段中输入一些文本时,span将自动将字母/数字添加到span中。如果输入值被删除,量程将再次显示为“空” 我认为这可以用一种更简单的方式实现,并且希望只在一个函数中实现。这可能吗?很简单:使用函数设置#span元素的HTML,并在运行时和绑定到#input字段的特定事件期间执行该函数。我建议使用.on()而不是.bind(): $('#input').on("change keyup input",

我有一个span和一个输入字段,当输入字段为空时,我需要它的span来表示“empty”。当我在字段中输入一些文本时,span将自动将字母/数字添加到span中。如果输入值被删除,量程将再次显示为“空”


我认为这可以用一种更简单的方式实现,并且希望只在一个函数中实现。这可能吗?

很简单:使用函数设置
#span
元素的HTML,并在运行时和绑定到
#input
字段的特定事件期间执行该函数。我建议使用
.on()
而不是
.bind()

$('#input').on("change keyup input",function() { 
    if($.trim($('#input').val()) == ''){
        $('#span').html('Empty');
    } else {
        $('#span').html($(this).val());
    }
});
//定义设置html值的函数
var updateSpan=函数(){
var v=$.trim($(this.val());
如果(v==''){
$('#span').html('Empty');
}否则{
$('#span').html(v);
}
}
//在运行时执行函数
//我们使用.call()以便函数中的'this'引用我们的输入
updateSpan.call($('#input')[0]);
//在这些事件期间也将函数绑定为回调
//元素将自动作为“this”传递`
$('#input')。on('change keyup input',updateSpan)

是的,你只需要在我能想到的几乎每一种情况下,在我的头顶上,用键盘输入

您可以将.bind by.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() != '');
}

然后使用

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


分别。

这应该可以做到:

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

function updateSpan(s) {
    $('#span').html(s.trim() == '' ? 'Empty' : s);
}
最后一个
.keyUp()
确保事件触发一次,从而初始化范围


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

当您使用鼠标复制和粘贴时,可能会出现不涉及密钥更新的更改事件。@lex82好的,让我们保持原样。您缺少应该初始化的范围。事件必须触发一次。看到我的答案了。我没有投反对票,但是,我认为在这种情况下更合适。当输入不是空的时候,你忘记了更新跨度。虽然它比我的4行占用更多的空间,但我认为这更容易掌握。如果你把你的JS弄脏了,一切都可以变成一行;)
$('input').on('keyup', function(){
      if($(this).emptyCheck()){
          /* your function */ 
      }
});
$('input').on('keyup', function(){
    $(this).emptyCheck();
}
$('#input')
    .bind("change keyup input", function() { 
        updateSpan($(this).val());
    })
    .trigger('keyup');

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