Question

我在使用if else声明时遇到了一些问题，我无法弄清楚它为什么会这样运作。当我单击该按钮时，它将运行if语句并立即运行else语句。

＆＃13;

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

＆＃13;

<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>

＆＃13;

这是我对webpack的app.js

/**
 * 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

您的事件处理程序处理＆＃34; touchend＆＃34;和＆＃34;点击＆＃34;。根据设备类型，它将被调用两次;可能这里发生的是，在第一次调用时，您设置输入的属性＆＃34; type＆＃34;在else子句中输入密码，在第二次调用时输入if-part。

Answer 2

看起来您的事件处理程序被多次调用。您已将touchend和click事件附加到元素。由于您所做的只是在输入元素中切换类型，因此看起来if和else都会运行。通过在事件处理程序上放置调试器来确认这一点。您将知道处理程序被多次调用。

Answer 3

解决。发现我的Laravel中的这种特殊的视图排序使app.js在HTML中运行了两次。

感谢大家尝试提供帮助。

if else语句在单击if和else时都会通过

3 个答案: