更新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); 
    }); 
});