只有当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将只执行if空if语句，如果错误当前不可见，但是它不能工作.

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

顺便说一句，为了清楚起见，这段代码检查“myFancyDiv”是否是，而不是可见的。