javascript - 函数内的函数 javascript 逻辑错误

Question

我无法找出语法逻辑错误位于最下面的脚本中的位置。本质上，它的作用是提醒人们必须等待 1.5 秒才能回答单选按钮类型的问题并自动转到下一页。如果他们花费超过 1.5 秒，则不会发出警报。

此脚本仅针对一次单击事件编写，但我需要它适用于两个嵌套事件，其中单击单选按钮选项会自动触发“下一页”按钮以移至下一页。例如，如果您取出以下事件(及其结束括号)，则效果很好:

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

有专家可以检测到这个问题吗？

Answer 1

(请参阅下面更新问题的答案)

这不是语法错误。这是一个逻辑错误。

如果您一致地格式化代码，它会变得稍微清晰一些:

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

(顺便说一下，从 jQuery 事件处理程序返回 true 没有任何意义，所以我在上面删除了它。)

<小时/>

您在下面发表了评论:

What happens is that I want clicking the radio button to automatically trigger the "Next" button for going to the next page since I have one question per page.

这并没有从根本上改变事情。您尚未展示该按钮如何移动到下一页，但您只需将该代码放入上面的一个 click 处理程序中即可。例如，您仍然在单选按钮和按钮上 Hook 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;
            }
        });
    }
});

当您可以使用通用逻辑时，我不太喜欢触发此类合成事件，但这是一种选择。