Schaltflächen anhand der Benutzereingabe -E -Mail anzeigen/ausblenden

In diesem Artikel wird erläutert, wie Sie JQuery verwenden, um eine gemeinsame Interaktion zwischen Benutzeroberflächen zu erreichen: Nur eine Schaltfläche wird angezeigt, wenn der Benutzer die richtige E -Mail -Adresse in das angegebene Eingabefeld eingibt (z. B. die Schaltfläche "Konto löschen"). Wir werden vollständige Codebeispiele angeben und die Implementierungslogik im Detail erläutern, um sie zu verstehen und auf Ihr eigenes Projekt anzuwenden und die Benutzererfahrung zu verbessern.

Kernidee

Der Schlüssel zur Implementierung dieser Funktion ist:

1. Holen Sie sich die E-Mail-Adresse des Benutzers: Holen Sie sich die E-Mail-Adresse des Benutzers über das schreibgeschützte Eingabefeld.
2. Hören Sie sich die Eingabefeld ändert: Hören Sie sich das Eingabeereignis des Eingabefeldes an, in dem der Benutzer die E -Mail -Adresse eingibt.
3. Vergleichen Sie die E -Mail -Adresse: Vergleichen Sie jedes Mal, wenn der Benutzer eingibt, die eingegebene E -Mail -Adresse mit der E -Mail -Adresse des Benutzers.
4. Schaltfläche anzeigen/ausblenden: Wenn die eingegebene E -Mail -Adresse der E -Mail -Adresse des Benutzers übereinstimmt, wird die Schaltfläche angezeigt. Andernfalls wird die Taste versteckt.

HTML -Struktur

Zunächst müssen wir die HTML -Struktur definieren. Hier sind drei Schlüsselelemente:

• Ein schreibgeschütztes Eingabefeld wird verwendet, um die E-Mail-Adresse des Benutzers anzuzeigen (in der tatsächlichen Anwendung sollte diese E-Mail-Adresse aus dem Backend erhalten werden).
• Ein Eingabefeld, in dem der Benutzer seine E -Mail -Adresse zur Überprüfung eingibt.
• Eine Schaltfläche, die nur angezeigt wird, wenn der Benutzer die richtige E -Mail -Adresse eingibt.

 <eingabe type="text" deaktiviert="" placeholder="[E-Mail geschützt]" name="emp_email" class="Form-kontroll">

<eingabe type="text" placeholder="Wenn Sie Ihr Konto löschen möchten, geben Sie bitte Ihre E-Mail-Wert" value="" name="mail_pass" class="Form-Control-E-Mail-Pass-Delete"> ein

<eingabe type="Taste" value="Konto löschen?" class="btn btn-custom del_acount hide_del_button">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.13/jquery.min.js"> </script></eingabe></eingabe></eingabe>

Beachten Sie, dass der Ausgangszustand der Taste del_acount versteckt ist, die über die Klasse hide_del_button implementiert wird.

CSS -Stil

Um die Taste zu verbergen, müssen wir den Stil der Klasse hide_del_button definieren:

 .hide_del_button {
  Anzeige: Keine;
}

JQuery Code

Als nächstes verwenden wir JQuery, um die Kernlogik zu implementieren:

 $ (Dokument) .Ready (function () {
  // Erhalten Sie die E -Mail -Adresse des Benutzers var user_email = $ ('input [name = "emp_email"]'). Attr ('Platzhalter');

  // Hören Sie sich das Eingabeereignis an $ (". E-Mail-Pass-Delete"). On ("Eingabe", Funktion () {
    // Die derzeit vom Benutzer var current_email = $ ('.'. '.'. '.'. '.'. E-Mail-Pass-Delete ').

    // E -Mail -Adressen vergleichen und Schaltflächen anzeigen/ausblenden if (user_email == current_email) {
      $ (". Del_acount"). removeclass ("hide_del_button");
    } anders {
      $ (". Del_acount"). AddClass ("hide_del_button");
    }
  });
});

Code Erläuterung:

1. $ (Dokument) .Ready (function () {...}) ;: Achten Sie darauf, den Code nach dem Laden des DOM auszuführen.
2. var user_email = $ ('input [name = "emp_email"]'). attr ('Platzhalter') ;: Holen Sie den Platzhalter -Attributwert des EMP_EMAIL -Eingangsfelds und speichern Sie es in der Variablen user_email. Hier wird davon ausgegangen, dass die E -Mail -Adresse des Benutzers in den Profiltern angezeigt wird. In den tatsächlichen Anwendungen müssen Sie es möglicherweise vom Backend erhalten und dem Wert -Attribut zuweisen.
3. $ (".. Wenn der Benutzer den Inhalt in das Eingabefeld eingibt, wird die Funktion ausgeführt.
4. var Current_email = $ ('. E-Mail-Pass-Delete'). Val () ;: Ruft den derzeit vom Benutzer in das Eingabebuch von E-Mail-Pass-Delete eingegebene Wert ab und speichert ihn in der Variablen current_email.
5. if (user_email == current_email) {...} else {...}: Vergleichen Sie die Werte von user_email und current_email.
   • Wenn Sie gleich sind, entfernen Sie die Klasse für hide_del_button der Schaltfläche del_acount, um die Schaltfläche anzuzeigen.
   • Wenn nicht gleich, fügen Sie die Klasse für hide_del_button hinzu, um die Schaltfläche zu verbergen.

Schlüsselverbesserungen:

Dem ursprünglichen Code fehlt eine weitere Anweisung, wodurch die Schaltfläche weiter angezeigt wird, wenn der Benutzer die richtige E -Mail -Adresse eingibt und sie dann auf die falsche Weise ändert. Nach dem Hinzufügen der Anweisung der eleganten können Sie sicherstellen, dass die Schaltfläche nur angezeigt wird, wenn der Benutzer die richtige E -Mail -Adresse eingibt.

Vollständiger Codebeispiel

 

<kopf>
  <title> Schaltfläche SHOW AUF E -Mail -Übereinstimmung </title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.13/jquery.min.js"> </script>
  <styles>
    .hide_del_button {
      Anzeige: Keine;
    }
  



  <eingabe type="text" deaktiviert="" placeholder="[E-Mail geschützt]" name="emp_email" class="Form-kontroll">

  <eingabe type="text" placeholder="Wenn Sie Ihr Konto löschen möchten, geben Sie bitte Ihre E-Mail-Wert" value="" name="mail_pass" class="Form-Control-E-Mail-Pass-Delete"> ein

  <eingabe type="Taste" value="Konto löschen?" class="btn btn-custom del_acount hide_del_button">

  <script>
    $ (Dokument) .Ready (function () {
      var user_email = $ (&#39;input [name = "emp_email"]&#39;). attr (&#39;Platzhalter&#39;);

      $ (". E-Mail-Pass-Delete"). On ("Eingabe", function () {
        var current_email = $ (&#39;. E-Mail-Pass-Delete&#39;). Val ();

        if (user_email == current_email) {
          $ (". Del_acount"). removeclass ("hide_del_button");
        } anders {
          $ (". Del_acount"). AddClass ("hide_del_button");
        }
      });
    });
  </script>


</eingabe></eingabe></eingabe></styles></kopf>

Das obige ist der detaillierte Inhalt vonSchaltflächen anhand der Benutzereingabe -E -Mail anzeigen/ausblenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!