只有在div沒有顯示的情況下才預先登記？

Question

基本上，我只想在我預先設定的div尚未顯示的情況下預先安裝一個div。

$(".loginForm").submit(function() { 
    var username = $("input.username").val(); 
     var password = $("input.password").val(); 
     var errorvisible = $("body").has(".alert.error"); 
    if (!username || !password && errorvisible == false) { 
     $('body').prepend("<div class=\"error alert\">One or more field(s), have been left empty</div>"); 

     setTimeout(function() { 
      $('.error.alert').fadeOut('1000', function() { 
       $('.error.alert').remove(); 
      }); 
     }, 6000); 

     event.preventDefault(); 
    } 

}); 

此刻，我想使它所以如果聲明jQuery將只做如果爲空，如果錯誤是當前不可見但它不工作...

 <div class="pageCont"> 

     <div class="title"> 
      <h1>LetsChat</h1> 
      <h4>The new way of interaction.</h4> 
     </div> 

     <div class="login box"> 
     <form method="POST" action="#" class="loginForm"> 
      <input type="text" class="loginInput username" placeholder="Aquinas Email or Number" /><br> 
      <input type="password" class="loginInput password" placeholder="Password" /><br> 
      <div class="checkBox"> 
       <input type="checkbox" id="checkBoxLink"> 
       <label for="checkBoxLink">Remember Me</label> 
       <a href="forgotpass" class="forgotpass cfix">Forgotten your password?</a> 
      </div> 
      <input type="submit" value="Submit" class="login btn green" /> 
      <input type="reset" value="Clear Fields" class="reset btn green" /> 
     </form> 
     </div> 
     <div class="signup box"> 
      <form method="POST" action="#" class="signupForm"> 
       <input type="text" class="signupInput" placeholder="First Name" /><br> 
       <input type="text" class="signupInput" placeholder="Last Name" /><br> 
       <input type="text" class="signupInput" placeholder="Aquinas Email" /><br> 
       <input type="password" class="signupInput" placeholder="Password" /><br> 
       <input type="submit" class="purple btn signup" value="Sign Up Today!"> 
      </form> 
     </div> 
    </div> 

Answer 1

您可以檢查.error.alert元素是否存在，如果是的話不做別的創建一個新的

$(".loginForm").submit(function() { 
 
    var username = $("input.username").val(); 
 
    var password = $("input.password").val(); 
 
    var errorvisible = $("body").has(".alert.error"); 
 
    if (!username || !password && errorvisible == false) { 
 

 
    if (!$('.error.alert').length) { 
 
     $('body').prepend("<div class=\"error alert\">One or more field(s), have been left empty</div>"); 
 
     setTimeout(function() { 
 
     $('.error.alert').fadeOut('1000', function() { 
 
      $(this).remove(); 
 
     }); 
 
     }, 6000); 
 
    } 
 

 
    event.preventDefault(); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="POST" action="#" class="loginForm"> 
 
    <input type="text" class="loginInput username" placeholder="Aquinas Email or Number" /> 
 
    <br> 
 
    <input type="password" class="loginInput password" placeholder="Password" /> 
 
    <br> 
 
    <div class="checkBox"> 
 
    <input type="checkbox" id="checkBoxLink"> 
 
    <label for="checkBoxLink">Remember Me</label> 
 
    <a href="forgotpass" class="forgotpass cfix">Forgotten your password?</a> 
 
    </div> 
 
    <input type="submit" value="Submit" class="login btn green" /> 
 
    <input type="reset" value="Clear Fields" class="reset btn green" /> 
 
</form>

Answer 2

如果我正確理解你的問題，下面應該可以工作嗎？

$(".loginForm").submit(function() { 
    var username = $("input.username").val(); 
    var password = $("input.password").val(); 
    var errorvisible = $("body").has(".alert.error").length; 

    if (!username || !password) 
    { 
     if(errorvisible == 0) 
      $('body').prepend("<div class=\"error alert\">One or more field(s), have been left empty</div>"); 

     setTimeout(function() { 
      $('.error.alert').fadeOut('1000', function() { 
       $('.error.alert').remove(); 
      }); 
     }, 6000); 

     event.preventDefault();   
    } 
}); 

Answer 3

我已經使用這種類型的代碼很多次：

if(!$('#myFancyDiv').is(':visible')) { 
    //prepend or do whatever you want here 
} 

BTW只是爲了清楚起見，該代碼檢查是否 'myFancyDiv' 是不可見。