jQuery通过多个if语句运行，然后继续

Question

只是做一点点注册页面，并试图使它检查每个字段，如果它有一个值，如果没有它会添加.error类，但如果所有3个输入都有一个值，则显示成功页面

$(".btn").click(function() { 
    //Check to see if the inputs have any data 
    if ($('.username-input').val() == '') { 
     $(this).addClass('error'); 
    } 
    else if ($('.password-input').val() == '') { 
     $(this).addClass('error'); 
    } 
    else if ($('.email-input').val() == '') { 
     $(this).addClass('error'); 
    } 

    //if all inputs have data open up success page and close it. 
    $(".btn").click(function() { 
     $(".success-wrapper").animate({ 
      bottom: "0%" 
     }, 'slow'); 
    }); 
    $(".close").click(function() { 
     $(".success-wrapper").animate({ 
      bottom: "-100%" 
     }, 'slow'); 
    }) 
});; 

Answer 1

这可能让你开始：

/* javascript */ 
 
arr = ['username-input', 'password-input', 'email-input']; 
 
err = false; 
 

 
$(".btn").click(function() { 
 
    err = false; 
 
    $.each(arr, function(ndx, fld){ 
 
    $('.'+fld).removeClass('errorField'); 
 
    if ($('.'+fld).val() == ""){ 
 
     $('.'+fld).addClass('errorField'); 
 
     err = true; 
 
    } 
 
    }); //END $.each 
 
    if (err) return false; 
 
    $('.success-wrapper').fadeIn(); 
 
    $('.success-inner').animate({ 
 
    top : '20vh' 
 
    },700,function(){ 
 
     setTimeout(function(){ 
 
     $('.success-inner').animate({ 
 
      top: '100vh' 
 
     },700); 
 
     $('.success-wrapper').fadeOut(500); 
 
     },1500); 
 
    }); 
 
}); //END .btn click

/* CSS */ 
 
html,body{min-height:100vh;} 
 
* {position:relative;box-sizing:border-box;} 
 

 
.success-wrapper{ 
 
    position:absolute; 
 
    top:0;left:0;right:0;bottom:0; 
 
    text-align:center; 
 
    background:black; 
 
    opacity:0.7; 
 
    display:none; 
 
} 
 
.success-inner{ 
 
    top:100vh; 
 
    width:30vw; 
 
    height:80px; 
 
    margin:0 auto; 
 
    font-size:2rem; 
 
    color:darkorange; 
 
} 
 
.errorField{background-color:yellow;}

<!-- HTML --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<input class="username-input" type="text" /><br> 
 
<input class="password-input" type="text" /><br> 
 
<input class="email-input" type="text" /><br> 
 
<button class="btn">Submit</button> 
 

 
<div class="success-wrapper"> 
 
    <div class="success-inner">Total Success</div> 
 
</div>

Answer 2

你不希望添加新的前夕第一个事件处理程序中的nt监听器。如果您具有所有输入的值，则只需在第二个$(".btn").click内运行代码。

这意味着您需要跟踪是否有任何错误。

您还可以通过循环您的投入和使用toggleClass()删除重复代码，因为你还需要删除错误类（可能做到这一点像模糊另一个事件处理程序虽然）

$(".btn").click(function() { 
    var isValidForm = true; 
    $('.username-input,.password-input, .email-input').each(function(){ 
      var hasError = !this.value; 
      $(this).toggleClass('error', hasError); 
      if(hasError){ 
       isValidForm = false; 
      } 
    }); 

    if(isValidForm){ 
     $(".success-wrapper").animate({ 
      bottom: "0%" 
     }, 'slow'); 
    } 

}); 

$(".close").click(function() { 
    $(".success-wrapper").animate({ 
     bottom: "-100%" 
    }, 'slow'); 
}) 

Answer 3

var checkInputs=function(){ 
    var isError=0; 
     // Use an Each Loop to cycle through elements 
     // Note that since these are classes, there could be more than three total 
     // Consider using IDs 
    $(".username-input, .password-input, .email-input").each(function(){ 
     if($(this).val() == ''){ 
      $(this).addClass('error'); 
      isError++; 
     }; 
    }); 
     // If no errors, animate ".success-wrapper" 
     // Note that you can chain .animate() and that the next effect won't occur 
     // until the last ends, unless the "queue" option is set to false 
    if(isError == 0){ 
     $(".success-wrapper").animate({bottom:"0%"},"slow").animate({bottom:"-100%"},"slow"); 
    }; 
}; 

$(".btn").click(checkInputs); 
$(".close").click(function(){ 
    $(".success-wrapper").animate({bottom:"-100%"},{duration:"slow",queue:"false"); 
}); 

您不想在其他点击处理程序中使用点击处理程序，这不会触发该事件，而是将该事件添加到按钮的操作列表中;那么当你再次点击该按钮时，检查事件和添加的事件将会触发。

添加了“.close”事件，并对其进行了编辑，以便停止任何正在进行的动画并启动“关闭”事件。