Question

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

使用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效果（叫做'百叶窗'），这会使文字上升：

第一个问题：

使用当前代码，由于总共四个输入，文本“谢谢”滑动了4次。有什么理由吗？我该如何解决这个问题？

第二个问题：

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

感谢。

Answer 1

您使用了$('input[type="text"]').each(function(indx)...，因此对于input type=text，$('#answer').html("Thank you!");运行此代码：

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

我编辑了你的代码和你的jQuery：

{{1}}

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

关于JQuery UI的两个问题

3 个答案: