在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

此代码会立即在ready上运行：

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

它使用$field1的然后当前值，因此将事件挂钩到#password字段。

您最好的选择可能是将事件挂钩到两个字段;在处理程序体内，$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);
    });
});