javascript - 仅在 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 empty 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

如果我正确理解您的问题，下面的内容应该有用吗？

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