JavaScript 單擊確認時確認框不起作用

Question

如果他們真的想在表格中顯示密碼字段，我會嘗試制作一個確認框來通知用戶。 但是當點擊確認時它不起作用。

這是我的代碼：

HTML

<span onclick="myFunction()" class="fa fa-fw fa-eye fa-eye-slash field-icon toggle-password"></span>
<span style="display:none;" id="password-field">123456</span>

JS：

function myFunction() {
          
          if (confirm("Are you sure you want to show your password on the screen?)) {
              
              $(".toggle-password-<?=$model->id?>").click(function() {

            $(this).toggleClass("fa-eye-slash");
             
            });
                

            $(document).ready(function(){
                $(".toggle-password-<?=$model->id?>").click(function(){
                $("#password-field-<?=$model->id?>").toggle();
                });
            }); 
        
          } else {
            //do nothing
          }
          
        }

請幫我解決一下這個。

謝謝！

Answer 1

這是固定代碼的示例： https://codepen.io/mitni455/pen/YzwJwNL?editors=1010

我已經刪除了 PHP 特定的東西。

 function myFunction() { if (confirm("Are you sure you want to show your password on the screen?")) { $('#password-field').show(); } else { $('#password-field').hide(); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button onclick="myFunction()"> My Function </button> <span style="display:none;" id="password-field"> 123456 </span>

好的，這里有幾件事：

• 當您單擊確認時，您只是添加了另外 2 個單擊處理程序和一個文檔加載處理程序（它也是 memory 泄漏）。
• 代碼$(".toggle-password-<?=$model->id?>").click將另一個（冗余）單擊處理程序添加到.toggle-password-123按鈕
• 您從未調用過顯示/隱藏或更改span#password-field的顯示值...這在上面的重構代碼中得到了解決
• 您錯過了confirm("Are you sure you want to show your password on the screen?")
• $(document).ready不會觸發並且是多余的，因為在您單擊按鈕時文檔已經加載。 所以你可以刪除它。

這是你所做的：確認：

1. 將點擊處理程序添加到.toggle-password-{id} （這是您剛剛點擊的按鈕）；
2. 添加文檔 onload 事件處理程序（到已加載的文檔）；
3. 文檔加載后（永遠不會觸發），向.toggle-password-{id};
4. 最后，當它被點擊時，然后切換密碼字段

Answer 2

<button onclick="myFunction()" class="fa fa-fw fa-eye fa-eye-slash field-icon toggle-password">Click me</button>
<span style="display:none;" id="password-field">123456</span>

<script type="text/javascript">

function toggledisplay(elementID)
     {
        (function(style) {
             style.display = style.display === 'none' ? '' : 'none';
                })(document.getElementById(elementID).style);
     }

function myFunction() {  
        
    if (confirm("Are you sure you want to show your password on the screen?")) {
        toggledisplay("password-field");
        
      }
}

在復制代碼時，我使用了button標簽來查看單擊的位置。 然后，添加 function toggledisplay(elementID)以在confirm為True時切換顯示樣式。