我的Javascript if语句返回true，即使它是false

时间：2018-04-22 04:55:16

标签： javascript jquery

我的页面上有一个按钮和一个表单。单击按钮时，它应显示表单，再次单击时应隐藏表单。

出于某种原因，无论何时单击按钮，它都会执行第一个if语句，无论它是否为真。我该如何解决这个问题？

这是我的HTML代码

<div class="return-user-signin">
    <h2 class="checkout-return-cust">Returning customer?</h2>
    <button class="checkout-login-button"><i class="fas fa-user"></i> log in</button>

    <form class="woocomerce-form woocommerce-form-login login check-login pop-login-form" method="post" style="display: none;">


        <p class="form-row form-row-first">
            <input placeholder="Username or email" class="input-text placeholder" name="username" id="username" type="text">
        </p>
        <p class="form-row form-row-last">
            <input class="input-text placeholder" placeholder="Password" name="password" id="password" type="password">
        </p>
        <div class="clear"></div>


        <p class="form-row">

        </p>

        <div class="clear"></div>


    </form>

这是我的JavaScript 

var login_button = $(".checkout-login-button");
var login_form = $(".pop-login-form");

if (login_form.css('display') == "none") {
    $(document).on('click', '.checkout-login-button', function () {
        login_form.show();
        login_form.off('click');
        login_form.css('display', 'block');
        return;
    });
} else {
    $(document).on('click', '.checkout-login-button', function () {
        login_form.hide();
        login_form.off('click');
        login_form.css('display', 'none');
        return;
    });
}

5 个答案:

答案 0 :(得分：0)

反过来说，您只需定义.click()事件一次，然后在其中定义if-else结构的逻辑。

现在的方式，它只显示表单（从不隐藏它），因为正在运行的代码的唯一部分是login_form.css('display') == "none"内的一个，当页面加载时为真

HIH

＆＃13;
＆＃13; 
var login_button = $(".checkout-login-button"); var login_form = $(".pop-login-form");

    
$(document).on('click', '.checkout-login-button', function(){
      if( login_form.css('display') == "none" ) {
      login_form.show();
       login_form.off('click');
        login_form.css('display', 'block');
        
      }

       else {
        login_form.hide();
        login_form.off('click');
        login_form.css('display', 'none');
          
            }
            });
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="return-user-signin">
    <h2 class="checkout-return-cust">Returning customer?</h2>
    <button class="checkout-login-button"><i class="fas fa-user"></i> log in</button>

    <form class="woocomerce-form woocommerce-form-login login check-login pop-login-form" method="post" style="display: none;">


<p class="form-row form-row-first">
    <input placeholder="Username or email" class="input-text placeholder" name="username" id="username" type="text">
</p>
<p class="form-row form-row-last">
    <input class="input-text placeholder" placeholder="Password" name="password" id="password" type="password">
</p>
<div class="clear"></div>


<p class="form-row">

</p>

<div class="clear"></div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您首先要创建事件，然后在其中创建条件语句。

＆＃13;
＆＃13; 
var login_button = $(".checkout-login-button"); 
var login_form = $(".pop-login-form");

$(document).on('click', '.checkout-login-button', function(){
    if( login_form.css('display') == "none" ) {
        login_form.show();
        login_form.off('click');
        login_form.css('display', 'block');
        return;
    } else {
        login_form.hide();
        login_form.off('click');
        login_form.css('display', 'none');
        return;
    }
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="return-user-signin">
    <h2 class="checkout-return-cust">Returning customer?</h2>
    <button class="checkout-login-button"><i class="fas fa-user"></i> log in</button>

    <form class="woocomerce-form woocommerce-form-login login check-login pop-login-form" method="post" style="display: none;">


<p class="form-row form-row-first">
    <input placeholder="Username or email" class="input-text placeholder" name="username" id="username" type="text">
</p>
<p class="form-row form-row-last">
    <input class="input-text placeholder" placeholder="Password" name="password" id="password" type="password">
</p>
<div class="clear"></div>


<p class="form-row">

</p>

<div class="clear"></div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您似乎正在尝试更改处理点击的功能，这可以通过删除现有的并添加另一个来实现。你想在这里删除它：

login_form.off('click');

但是当您实际将侦听器添加到document以使用事件委派时，并且在此之后不再添加侦听器时，这不起作用。

只有一个侦听器更简单，并且如果它在当时存在，则将其直接附加到元素：

var login_form = $(".pop-login-form");

$(".checkout-login-button").click(function () {
    login_form.toggle();
});
您的login_button初始化建议的

是这种情况。如果没有，请一定继续事件委托：

var login_form = $(".pop-login-form");

$(document).on("click", ".checkout-login-button", function () {
    login_form.toggle();
});

答案 3 :(得分：0)

您只能拥有一个click处理程序并检查其中的CSS状态。此外，css使用display:block/none来处理可见性，因此我认为show() / hide()方法是多余的。

＆＃13;
＆＃13; 
var login_button = $(".checkout-login-button");
var login_form = $(".pop-login-form");

$(document).on('click', '.checkout-login-button', function() {
  if (login_form.css('display') === "none") {
    login_form.css('display', 'block');
  } else {
    login_form.css('display', 'none');
  }
})
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="return-user-signin">
  <h2 class="checkout-return-cust">Returning customer?</h2>
  <button class="checkout-login-button"><i class="fas fa-user"></i> log in</button>

  <form class="woocomerce-form woocommerce-form-login login check-login pop-login-form" method="post" style="display: none;">


    <p class="form-row form-row-first">
      <input placeholder="Username or email" class="input-text placeholder" name="username" id="username" type="text">
    </p>
    <p class="form-row form-row-last">
      <input class="input-text placeholder" placeholder="Password" name="password" id="password" type="password">
    </p>
    <div class="clear"></div>


    <p class="form-row">

    </p>

    <div class="clear"></div>


  </form>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

更改您的JavaScript，如下所示：

var login_button = $(".checkout-login-button");
var login_form = $(".pop-login-form");
var show_form = false; // add this line
$(document).on('click', '.checkout-login-button', function () {
    if(!show_form){
        //SHOW FORM
        show_form = true;
    }else{
        //HIDE FORM
        show_form = false;
    }
});
相关问题
最新问题