javascript - 関数内の関数 javascript 論理エラー

Question

どこにあるのかわかりません構文論理エラーは、一番下のスクリプトにあります。基本的には、ラジオボタンタイプの質問に答えて次のページに自動的に移動するには、1.5 秒待つ必要があることをユーザーに警告します。1.5 秒以上経過してもアラートは発生しません。

このスクリプトは 1 回のクリックイベント用に作成されましたが、ラジオボタンオプションをクリックすると自動的に「次へ」ボタンがトリガーされ、次のページに移動する 2 つのネストされたイベントで動作する必要があります。たとえば、次のイベント (およびその終了ブラケット) を取り出すと、うまく機能します。

$("[class*=bfasg] .radio").click(function(){

括弧が正しいことを確認するためにEsprimaで構文をチェックしたので、問題は別の場所にあります。

$(document).ready(function() {
   minTime(1.5);
   function minTime(minTime) {
       var startTime = new Date();
       $("[class*=bfasg] .radio").click(function(){$("#movenextbtn").click(function(){
           var endTime = new Date();
           if((endTime - startTime)/1000 <= minTime) {
                alert('You must spend at least '+minTime+' seconds on the question.');
                return false;
            }
            else {
                return true;
            }
        }); 
      });
    }
});

問題を検出できる専門家はいますか?

score 4 · Accepted Answer

(以下の更新された質問への回答を参照してください)

構文エラーではありません。論理エラーです。

コードを一貫してフォーマットすると、少し明確になります。

$(document).ready(function () {
    minTime(1.5);

    function minTime(minTime) {
        var startTime = new Date();
        // Hooking up a click handler
        $("[class*=bfasg] .radio").click(function () {
            // This code doesn't run until/unless someone clicks
            // one of the `[class*=bfasg] .radio` elements.
            $("#movenextbtn").click(function () {
                var endTime = new Date();
                if ((endTime - startTime) / 1000 <= minTime) {
                    alert('You must spend at least ' + minTime + ' seconds on the question.');
                    return false;
                } else {
                    return true;
                }
            });
        });
    }
});

そこで行ったことは、「誰かが要素をクリックすると、[class*=bfasg] .radioその要素にイベントハンドラーを接続する#movenextbtn」ということです。

おそらく、誰かがラジオボタンをクリックするまでイベントを接続するのを待ちたくないでしょう。両方の要素セットでクリックイベントをフックすることが目的の場合は、CSS の場合と同じセレクターでそれらを結合します。

$(document).ready(function () {
    minTime(1.5);

    function minTime(minTime) {
        var startTime = new Date();
        $("[class*=bfasg] .radio, #movenextbtn").click(function () {
            var endTime = new Date();
            if ((endTime - startTime) / 1000 <= minTime) {
                alert('You must spend at least ' + minTime + ' seconds on the question.');
                return false;
            }
        });
    }
});

(ちなみにtruejQueryのイベントハンドラーからの復帰は意味がないので上で削除しました。)

あなたがコメントした以下：

ページごとに 1 つの質問があるため、ラジオボタンをクリックすると、次のページに移動するための [次へ] ボタンが自動的にトリガーされます。

それは物事を根本的に変えるものではありません。ボタンが次のページに移動するために何をするかは示していませんが、そのコードをclick上記の 1 つのハンドラーに入れるだけです。clickたとえば、ラジオボタンとボタンの両方をフックし、共通のコードを使用してそのイベントを処理します。例えば：

$(document).ready(function () {
    minTime(1.5);

    function minTime(minTime) {
        var startTime = new Date();
        $("[class*=bfasg] .radio, #movenextbtn").click(function () {
            var endTime = new Date();
            if ((endTime - startTime) / 1000 <= minTime) {
                alert('You must spend at least ' + minTime + ' seconds on the question.');
                return false;
            } else {
                // ****Move to next page here****
            }
        });
    }
});

または、次のように、ラジオボタンのクリックでボタンのクリックイベントをトリガーすることもできます。

$(document).ready(function () {
    minTime(1.5);

    function minTime(minTime) {
        var startTime = new Date();

        // Hook up `click` on the radio buttons
        $("[class*=bfasg] .radio").click(function () {
            // Respond to click by firing click on the #movenextbtn
            $("#movenextbtn").click();
        });

        // Hook up `click` on the #movenextbtn
        $("#movenextbtn").click(function () {
            var endTime = new Date();
            if ((endTime - startTime) / 1000 <= minTime) {
                alert('You must spend at least ' + minTime + ' seconds on the question.');
                return false;
            }
        });
    }
});

私は、一般的なロジックを使用できる場合に、そのような合成イベントを起動することはあまり好きではありませんが、オプションです。

score 0 · Accepted Answer

function callMe() {
  // Do Something
}

$(document).ready(function() {
  callMe();
});

ready() の外側で FUNCTION を宣言しますが、ready() の内側で FUNCTION を定義します。ドキュメントの ready の外側でそれらを定義することをお勧めします。また、必要に応じて、メソッドの実装をドキュメント内に配置します。

javascript - 関数内の関数 javascript 論理エラー

2 に答える 2

Related

Reference