0

そこで、ここに簡単な登録フォームを作成しました。

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 効果 (「ブラインド」と呼ばれます) を作成しました。

最初の質問:

現在のコードでは、合計 4 回の入力があるため、テキスト "thank you" が 4 回上にスライドします。何か理由は？これを修正するにはどうすればよいですか?

2 番目の質問:

数秒後に効果が実際に有効にならないようにするにはどうすればよいですか。このようにして、ユーザーはテキストを表示してからスライドアップできますか?

ありがとう。

4

3 に答える 3

2

を使用$('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/

于 2013-03-05T19:57:45.770 に答える
1 
$(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つの入力フィールドがあるため、このコードを使用して問題を修正できます。

于 2013-03-05T19:57:50.203 に答える
1 
$(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");
        }
    });
});
于 2013-03-05T20:08:05.530 に答える