兩個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"); 
     } 
    }); 
});