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

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 个，页面加载时也不会发生任何情况。

有什么想法吗？

太棒了 - 学习新东西

Answer 1

根本不需要参数，事件处理程序绑定(bind)到元素，以便您可以在函数内使用 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) });