-1

私がJQuery関数で抱えている問題は、Webページを更新したときにのみ機能し、すべてのブラウザーでこのように機能することです。私がやろうとしているのは、特定の div コンテナに囲まれたすべてのテキストフィールドにすべてデータが含まれている場合、コンテナにチェックマーク画像を挿入することです。しかし、現在、この画像は、テキストフィールドにすべてのデータを入力し、ブラウザを更新した後にのみ表示されます。

.rightbilling は、テキストフィールドが評価しようとしている div コンテナーのクラスであり、「#step1」は .rightbilling を含むフィールドセットです。

私はこれを何時間も解決しようとしてきました..助けていただければ幸いです。さらに情報が必要な場合は、お知らせください。

$(document.body).ready(function() {
        var all_complete = true;    
    $(".rightbilling").find("input:text").each(function(){


        if ($(this).val() == '' ) {
            all_complete = false;
            return true;
        };


    if (all_complete) {
        $("#step_1")
        .animate({
            paddingBottom: "120px"
        })
        .css({
            "background-image": "url(images/check.png)",
            "background-position": "bottom center",
            "background-repeat": "no-repeat"
        });

        $("#step_2").css({
            opacity: 1.0
        });
        $("#step_2 legend").css({
            opacity: 1.0 // For dumb Internet Explorer
        });
    };
});
4

2 に答える 2

2

document.ready 関数を使用しているため、関数はページの読み込み時にのみ呼び出されます。入力フィールドが変更されたときに onChange リスナーをアタッチして関数を呼び出すことを検討する必要があります。

于 2012-07-17T18:22:05.620 に答える
1 
$(document.body).ready(
    function () {
        var validation = function () {
            var all_complete = true;
            $(".rightbilling").find("input:text").each(
                function () {
                    if ($(this).val() == '') {
                        all_complete = false;
                        return true;
                    }
                    if (all_complete) {
                        $("#step_1").animate({
                            paddingBottom: "120px"
                        }).css({
                            "background-image": "url(images/check.png)",
                            "background-position": "bottom center",
                            "background-repeat": "no-repeat"
                        });
                        $("#step_2").css({
                            opacity: 1.0
                        });
                        $("#step_2 legend").css({
                            opacity: 1.0 // For dumb Internet Explorer
                        });
                    }
            });
        }
        validation();  //call it when the page is loaded
        $(".rightbilling").find("input:text").on("change",validation); //call it when input changes
    }
);
于 2012-07-17T18:30:39.387 に答える