elseステートメントがifとelseの両方を通過する場合

Question

ifelseステートメントで何らかの問題が発生しているが、なぜそれが動作しているのかわからない。ボタンをクリックすると、ステートメントが実行され、すぐにelseステートメントが実行されます。

var s, 
 
    PasswordShowHide = { 
 
    settings: { 
 
     passwordInput: $('#password'), 
 
     showHideButton: $('.password-toggle') 
 
    }, 
 

 
    init: function() { 
 
     s = this.settings; 
 
     this.bindUIActions(); 
 
    }, 
 

 
    bindUIActions: function() { 
 
     s.showHideButton.on("touchend click", function(e) { 
 
     e.preventDefault(); 
 
     // var inputType = s.passwordInput.attr('type'); 
 

 
     // console.log(inputType); 
 
     if (s.passwordInput.attr('type') === "password") { 
 
      s.passwordInput.attr("type", "text"); 
 
      console.log("Changed to text"); 
 
      s.showHideButton.html("Hide"); 
 
     } else { 
 
      s.passwordInput.attr("type", "password"); 
 
      console.log("Changed to password"); 
 
      s.showHideButton.html("Show"); 
 
     } 
 
     }); 
 
    } 
 

 
    }; 
 

 

 
(function() { 
 
    PasswordShowHide.init(); 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label> 
 
    Password 
 
    <button type="button" class="password-toggle">Show</button> 
 
    <input id="password" type="password" name="password" autocomplete="off" required> 
 
</label>

これはあなたのイベントハンドラは、 "touchend" を処理し、 "クリック" のWebPACK

/** 
* First we will load all of this project's JavaScript dependencies which 
* includes Vue and other libraries. It is a great starting point when 
* building robust, powerful web applications using Vue and Laravel. 
*/ 

// Vendor Files 
// ------------------------------ 
// Autocomplete: http://projects.sergiodinislopes.pt/flexdatalist/ 
require('./vendor/jquery.flexdatalist.min'); 

// Components 
// require('./components/disable'); 
require('./components/passwordValidator'); 
require('./components/passwordShowHide'); 
require('./components/select'); 
require('./components/showHide'); 
require('./components/date'); 
require('./components/menuDropdown'); 

Answer 1

のための私のapp.jsです。デバイスタイプに応じて、2回呼び出されます。おそらくここで何が起きるかは、最初の呼び出しでは、入力の属性 "type"をelse節のpasswordに設定し、2番目の呼び出しではif部分に入ります。

Answer 2

イベントハンドラが複数回呼び出されたようです。要素へのtouchendイベントとclickイベントの両方を添付しました。あなたがやっているのはinput要素の型を切り替えることだけですから、ifとelseの両方が実行されているように見えます。これを確認するには、デバッガをイベントハンドラに配置します。ハンドラが複数回呼び出されることがわかります。

Answer 3

解決済み。私のLaravelのビューのこの特定の照合でapp.jsがHTMLで2回実行されていることがわかりました。

お手数をおかけしていただきありがとうございます。