Aktualisieren der Werte von Variablen in jQuery

Question

Ich habe ein relativ einfaches Skript für die Manipulation des Textes in zwei Feldern. Dies funktioniert zunächst gut, aber wenn ich auf die Schaltfläche #check klicken, scheinen die Werte $field1 und $field2 nicht zu aktualisieren. Dies bedeutet, dass, während das Skript das zweite Feld manipulieren kann, wenn Text in das erste Feld eingegeben wird, es das erste Feld nicht manipulieren kann, wenn Text in das zweite Feld eingegeben wird.

$(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); 
     }); 
    }); 
}); 

ich entschuldige mich, wenn dies ein offensichtlicher Fehler ist, wie ich auf die Sprache relativ neu bin, aber ich würde jede mögliche Hilfe bei der Festsetzung dieses Problems zu schätzen wissen.

Answer 1

Dieser Code läuft sofort auf ready:

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

Es nutzt die dann aktuellen Wert von $field1, und so hakt das Ereignis auf dem #password Feld.

Ihre beste Wette ist wahrscheinlich, das Ereignis an beide Felder zu haken; Innerhalb des Handler-Hauptteils entspricht der Wert von $field1 und $field2 ab dem Zeitpunkt, zu dem das Ereignis ausgeführt wird, wie erwartet. Also:

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

---

Beachten Sie auch, dass $(function() { }) ist eine Abkürzung für Einhaken einen ready Handler. Da sich dieser Code bereits in einem ready Handler befindet, müssen Sie ihn nicht erneut in umwandeln.

Die Kombination der oben mit dem Vorschlag (und erklärt $field1 und $field2 so fallen wir Beute nicht zu The Horror of Implicit Globals), erhalten wir (** Kommentare sehen):

$(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); 
    }); 
});