Question

我遇到了元素对象和jQuery函数的问题：

HTML

<label  for='state'>State</label>
<input  id='state' name='state' type='text' value=''/>
<span class='info'><img class='tick' /><img class='cross' /></span>

JavaScript / jQuery

var state = $("#state");

function validatefield(myelement) {
    if (myelement.val().length > 3) {
        alert("word");
    } else {
        alert("sup");
    }
}
state.blur(validatefield(state));
state.keyup(validatefield(state));

页面加载时没有任何反应，即使状态输入的字符数超过3个。

有什么想法吗？

太棒了 - 学习新东西ftw

Answer 1

根本不需要参数，事件处理程序绑定到元素，以便您可以在函数内使用this关键字：

var state = $("#state");

function validatefield(event) {
    if (this.value.length > 3) { // <-- use `this.value` instead
        alert("word");
    } else {
        alert("sup");
    }
}
state.blur(validatefield);
state.keyup(validatefield);

你尝试它的方式实际上会调用函数并使用它的返回值作为事件处理程序，这就是为什么没有发生的事情：

// validatefield(state) is executed immediately and the return value, "undefined"
// is passed as the first argument to state.blur()
state.blur(validatefield(state));

要解决this关键字不可用的其他情况，您应该使用匿名函数：

state.blur(function () { validatefield(state) });

Answer 2

将函数调用包装在匿名函数中。

$(document).ready(function(){
    var state = $("#state");
    state.blur(function() {validatefield(state)});
    state.keyup(function() {validatefield(state)});
});

http://jsfiddle.net/eW8E8/1/

Answer 3

您应该使用匿名函数作为jQuery事件处理程序，而不是

state.keyup(validatefield(state));

使用

state.keyup(function() {
  validatefield(state);
});

Answer 4

不应该是：

if（myelement.value.length＆gt; 3）{

Answer 5

state.keyup(validatefield.call(this, state))

也应该有效（见http://ejohn.org/apps/learn/#26）

将元素作为变量传递给函数

5 个答案: