사용자 입력 이메일에 따라 버튼 표시/숨기기 : jQuery 구현 안내서

이 기사는 jQuery를 사용하여 일반적인 사용자 인터페이스 상호 작용을 달성하는 방법을 설명합니다. 버튼은 사용자가 지정된 입력 상자 (예 : "계정 삭제"버튼)에 올바른 이메일 주소를 입력 할 때만 표시됩니다. 우리는 완전한 코드 예제를 제공하고 자신의 프로젝트에이를 이해하고 적용하고 사용자 경험을 향상시키는 데 도움이되는 구현 로직을 자세히 설명합니다.

핵심 아이디어

이 기능을 구현하는 핵심은 다음과 같습니다.

1. 사용자의 이메일 주소 가져 오기 : 읽기 전용 입력 상자에서 사용자의 이메일 주소를 가져옵니다.
2. 입력 상자 변경 사항을 듣습니다. 사용자가 이메일 주소를 입력하는 입력 상자의 입력을 듣습니다.
3. 이메일 주소 비교 : 사용자가 입력 할 때마다 입력 한 이메일 주소를 사용자의 이메일 주소와 비교하십시오.
4. 표시/숨기기 버튼 : 입력 한 이메일 주소가 사용자의 이메일 주소와 동일하면 버튼이 표시됩니다. 그렇지 않으면 버튼이 숨겨집니다.

HTML 구조

먼저 HTML 구조를 정의해야합니다. 다음은 세 가지 주요 요소입니다.

• 읽기 전용 입력 상자는 사용자의 이메일 주소를 표시하는 데 사용됩니다 (실제 응용 프로그램에서는이 이메일 주소를 백엔드에서 얻어야합니다).
• 사용자가 확인을 위해 이메일 주소를 입력하는 입력 상자.
• 사용자가 올바른 이메일 주소를 입력 할 때만 표시되는 버튼.

 

를 입력하십시오.



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

del_acount 버튼의 초기 상태는 숨겨져 있으며 Hide_del_Button 클래스를 통해 구현됩니다.

CSS 스타일

버튼을 숨기려면 hide_del_button 클래스의 스타일을 정의해야합니다.

 .HIDE_DEL_BUTTON {
  디스플레이 : 없음;
}

jQuery 코드

다음으로 jQuery를 사용하여 핵심 논리를 구현합니다.

 $ (document) .ready (function () {
  // 사용자의 이메일 주소를 가져옵니다 var user_email = $ ( 'input [name = "emp_email"]'). attr ( 'placeholder');

  // 입력 이벤트를 듣습니다. $ ( ". email-pass-delete"). on ( "input", function () {
    // 사용자가 현재 입력 한 이메일 주소를 가져옵니다. var current_email = $ ( '. email-pass-delete'). val ();

    // 이메일 주소와 표시/숨기기 버튼을 비교합니다.
      $ ( ". del_acount"). removeClass ( "hide_del_button");
    } 또 다른 {
      $ ( ". del_acount"). addClass ( "hide_del_button");
    }
  });
});

코드 설명 :

1. $ (document) .ready (function () {...}); : DOM이로드 된 후 코드를 실행하십시오.
2. var user_email = $ ( 'input [name = "emp_email"]'). attr ( 'placeholder'); : Emp_Email 입력 상자의 자리 표시 자 속성 값을 얻고 user_email 변수에 저장하십시오. 여기에서 사용자의 이메일 주소가 자리 표시기에 표시된다고 가정합니다. 실제 응용 프로그램에서는 백엔드에서이를 얻어 값 속성에 할당해야 할 수도 있습니다.
3. $ ( ". email-pass-delete"). on ( "input", function () {...}); : email-pass-delete 클래스 이름의 입력 상자에 대한 입력 이벤트를 바인딩합니다. 사용자가 입력 상자에 컨텐츠를 입력하면 기능이 실행됩니다.
4. var current_email = $ ( '. email-pass-delete'). val (); : 이메일 통과 변호사 입력 상자에서 사용자가 현재 입력 한 값을 가져 와서 current_email 변수에 저장합니다.
5. if (user_email == current_email) {...} else {...} : user_email과 current_email의 값을 비교하십시오.
   • 동일하면 del_acount 버튼의 hide_del_button 클래스를 제거하여 버튼을 표시하십시오.
   • 동일하지 않은 경우 hide_del_button 클래스를 추가하여 버튼을 숨 깁니다.

주요 개선 사항 :

원래 코드에는 다른 명령문이 없으므로 사용자가 올바른 이메일 주소를 입력 한 다음 잘못된 이메일 주소로 변경하면 버튼이 여전히 표시됩니다. 다른 문을 추가 한 후에는 사용자가 올바른 이메일 주소를 입력 할 때만 버튼이 표시 될 수 있습니다.

완전한 코드 예제

 


  <title> 전자 메일 매치의 표시 버튼 </title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
  
    .HIDE_DEL_BUTTON {
      디스플레이 : 없음;
    }
  스타일>



  

  를 입력하십시오.

  

  <cript>
    $ (document) .ready (function () {
      var user_email = $ ( 'input [name = "emp_email"]'). attr ( 'placeholder');

      $ ( ". email-pass-delete"). on ( "input", function () {
        var current_email = $ ( '. email-pass-delete'). val ();

        if (user_email == current_email) {
          $ ( ". del_acount"). removeClass ( "hide_del_button");
        } 또 다른 {
          $ ( ". del_acount"). addClass ( "hide_del_button");
        }
      });
    });
  스크립트>


</cript>

위 내용은 사용자 입력 이메일에 따라 버튼 표시/숨기기 : jQuery 구현 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!