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