javascript - 关于 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 效果（称为“百叶窗”），这使得文本上升：

第一个问题：

使用当前代码，文本“thank you”向上滑动 4 次，因为总共有四个输入。有什么理由吗？我该如何解决？

第二个问题：

我该如何制作才能使效果在几秒钟后实际上不会生效。这样用户可以看到文本然后允许它向上滑动？

谢谢。

Answer 1

您使用$('input[type="text"]').each(function(indx)...了 ，因此对于任何input拥有type=text它的人都运行此代码：

$('#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');
    }
});

您使用了每个。所以它迭代了 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");
        }
    });
});