javascript - 更新 jQuery 中变量的值

Question

我有一个相对简单的脚本，用于操作两个字段中的文本。这最初效果很好，但是当我单击按钮 #check 时，$field1 和 $field2 的值似乎没有更新。这意味着，虽然当在第一个字段中输入文本时脚本可以操作第二个字段，但当在第二个字段中输入文本时它无法操作第一个字段。

$(document).ready(function() {
    var val = "";
    $field1 = $("#password");
    $field2 = $("#fake-password");

    $('#check').click(function() {
        $field1 = $("#fake-password");
        $field2 = $("#password");
        $("#password").hide();
        $('#check').hide();
        $("#fake-password").show().focus();
        $('#check-inv').show();
    });

    $('#check-inv').click(function() {
        $field1 = $("#password");
        $field2 = $("#fake-password");
        $("#fake-password").hide();
        $('#check-inv').hide();
        $("#password").show().focus();
        $('#check').show();
    });

    $(function () {
        $field1.on('keydown', function () {
            setTimeout(function () {
                $field2.html($field1.val());
                val = $field1.val();
                $field2.val(val);
            }, 0);
        });
    });
});

如果这是一个明显的错误，我深表歉意，因为我对该语言相对较新，但如果您能帮助解决此问题，我将不胜感激。

Answer 1

此代码在就绪后立即运行:

$(function () {
    $field1.on('keydown', function () {
        setTimeout(function () {
            $field2.html($field1.val());
            val = $field1.val();
            $field2.val(val);
        }, 0);
    });
});

它使用 $field1 的当时值，因此将事件 Hook 到 #password 字段。

您最好的选择可能是将事件 Hook 到两个字段；在处理程序主体中，事件运行时 $field1 和 $field2 的值将如您所料。所以:

$field1.add($field2).on('keydown', function () {

<小时/>

另请注意，$(function() { }) 是连接 ready 处理程序的快捷方式。由于该代码已经位于 ready 处理程序中，因此无需再次包装它。

将其与上面的建议相结合(并声明 $field1 和 $field2 这样我们就不会成为 The Horror of Implicit Globals 的牺牲品)，我们得到(参见 ** 评论):

$(document).ready(function() {
    var val = "";
    var $field1 = $("#password");                     // **
    var $field2 = $("#fake-password");                // **

    $('#check').click(function() {
        $field1 = $("#fake-password");
        $field2 = $("#password");
        $("#password").hide();
        $('#check').hide();
        $("#fake-password").show().focus();
        $('#check-inv').show();
    });

    $('#check-inv').click(function() {
        $field1 = $("#password");
        $field2 = $("#fake-password");
        $("#fake-password").hide();
        $('#check-inv').hide();
        $("#password").show().focus();
        $('#check').show();
    });

    // ** Note no $(function() { }) wrapper:
    $field1.add($field2).on('keydown', function () {  // **
        setTimeout(function () {
            $field2.html($field1.val());
            val = $field1.val();
            $field2.val(val);
        }, 0);
    });
});