两个jQuery的UI问题

Question

所以我做了这里快速注册表格：

http://jsfiddle.net/pBEt2/

的Javascript：

$(document).ready(function(){ 
    $('input:button').click(function(){ 
     $('input[type="text"]').each(function(indx){ 
      var $currentField = $(this); 
      if ($currentField.val() === ''){ 
       $currentField.addClass('empty'); 
       $('#answer').html("Please fill out all fields"); 
      } else{ 
       $currentField.removeClass('empty'); 
       $('#answer').html("Thank you!"); 
       $('#answer').effect('blind'); 
      } 
     }); 
}); 
}); 

不管怎么说，一旦你填写所有的区域，它为您提供了一个响应说“谢谢”，我做了一个Jquery效果（称为'百叶窗'），这使得文字上升：

第一个问题：

在当前的代码中，由于总共有四个输入，文本“谢谢”滑动四次。任何理由？我该如何解决？

第二个问题：

我如何使它所以效果实际上并没有生效，几秒钟后。用这种方式，用户可以看到文本，然后允许它滑动？

谢谢。

Answer 1

您使用$('input[type="text"]').each(function(indx)...，因为本作有type=text任何input运行这段代码：

$('#answer').html("Thank you!"); 

我编辑你的代码，你的jQuery：

$(document).ready(function(){ 

    $('input:button').click(function(){ 
     var flag = true; 
     $('input[type="text"]').each(function(indx){ 
      var $currentField = $(this); 
      if ($currentField.val() === ''){ 
       $currentField.addClass('empty'); 
       flag=false; 
      } else{ 
       $currentField.removeClass('empty'); 
      } 
     }); 
     if(flag){ 
      $('#answer').css('display','block'); 
      $('#answer').html("Thank you!"); 
     } 
     else 
      $('#answer').html("Please fill out all fields"); 
}); 
}); 

http://jsfiddle.net/pBEt2/7/

Answer 2

$(document).ready(function(){ 
     var error = false; 
    $('input:button').click(function(){ 
     $('input[type="text"]').each(function(indx){ 
      var $currentField = $(this); 
      if ($currentField.val() === ''){ 
       $currentField.addClass('empty'); 
       $('#answer').html("Please fill out all fields"); 
       error = true; 
      } else{ 
       $currentField.removeClass('empty'); 


      } 
     }); 
}); 

    if(error == true){ 
      $('#answer').html("Thank you!"); 
     $('#answer').effect('blind'); 
    } 
}); 

你使用each.So它迭代4次。因为我们有4个输入字段。使用这个代码你可以解决这个问题。

Answer 3

$(document).ready(function(){ 
    $("#answer").slideUp(); 
    $('input:button').click(function(){ 
     var correct = true; 
     $('input[type="text"]').each(function(indx){ 
      var $currentField = $(this); 
      if ($currentField.val() === ''){ 
       $currentField.addClass('empty'); 
       correct=false; 
      } else{ 
       $currentField.removeClass('empty'); 
      } 
     }); 

     $("#answer").slideDown(); 
     if(correct){ 
      $('#answer').html("Thank you!"); 
      setTimeout(function() { 
       $("#answer").slideUp(); 
      }, 3000);//this is the time you want to wait. 
     } 
     else{ 
      $('#answer').html("Please fill out all fields"); 
     } 
    }); 
});