javascript - jQuery App 完全锁定了 IE8 |适用于其他一切都很好

Question

我正在为我的公司做一个 ajax/jquery 测验，它在 Firefox、Chrome 甚至 Android 上运行都没有问题。但是，在使用 IE8 运行时，它会锁定到必须运行任务管理器才能结束 IE 进程的效果。我在不同的操作系统中尝试过不同的浏览器，唯一给我带来麻烦的是 Windows 中的 IE。 Windows 中的其他浏览器没有任何问题。我也试过几台不同的电脑。

Ajax 请求本身没问题；我认为是在用户选择答案后导致问题的隐藏/显示效果。其他答案应该会消失，并且会出现一些基于用户答案的​​响应文本。相当标准。在 IE 中会出现响应文本，但其他答案不会消失，然后 IE 会锁定。

我尝试使用 Firebug Lite，但由于 IE 死机程度如此之高，因此无法从中实际获得任何反馈。

下面是 javascript，以及实例的链接 IS HERE .

 <script type='text/javascript'>
                $(document).ready(function() {
                        var score=0;

                        $('#getStarted').click(function() {
                                $('#instructions').hide('slow');
                                $('#getStarted').hide('fast');
                                $.ajax({
                                        url: "scripts/quizProgress.php",
                                        data: "questionNumber=1",
                                        success: function(xml) {
                                                        var question = $(xml).find("text:[type=question]").text();
                                                        $('#questionDisplay').append(question);
                                                        $('#questionDisplay').show('slow');
                                                        $(xml).find("answer").each(function() {
                                                                var id = $(this).attr('id');
                                                                var answerText = $(this).find("text").text();
                                                                var tbi = "<p correct='";
                                                                if ($(this).find("correct").text() == '0') {
                                                                        tbi += "no";
                                                                }
                                                                else { tbi += "yes"; }
                                                                tbi += "' id='" + id + "'>" + answerText + "</p>";
                                                                $('#answerDisplay').append(tbi);
                                                                var responseText = $(this).find('response').text();
                                                                var responseInsert = "<p id='re"+id+"' class='hideResponse'>"+responseText+"</p>";
                                                                $('#responseDisplay').append(responseInsert);

                                                        });
                                                        $('#answerDisplay').show('slow');
                                                }


                                });
                        });

     $('#answerDisplay').hover(function() {
                                $(this).find('p').hover(function() {
                                        $(this).addClass("answerHover");
                                        }, function() {
                                        $(this).removeClass('answerHover');
                                });
                                $(this).find('p').click(function() {
                                        if ($(this).attr('correct')=='yes') {
                                        score ++;
                                        }
                                        var answer = $(this).attr('id');
                                        var allAnswers = $('#answerDisplay').find('p');
                                        $(allAnswers).each(function() {
                                                if (answer != $(this).attr('id')) {
                                                        $(this).hide('slow');
                                                }
                                                else {
                                                        $(this).addClass('selectedAnswer');
                                                }
                                        var responseID = "re"+answer;
                                        $('#responseDisplay').find('p').each(function() {
                                                if ($(this).attr('id')==responseID) {
                                                        $(this).removeClass('hideResponse');
                                                        $(this).show('slow');
                                                        $(this).addClass('showResponse');
                                                }
                                        });

                                        });
                                });
                        });

                });

请记住，这只是一个问题，还没有完全的功能。当它在 IE 中引起这么多问题时，我犹豫要不要继续。我们的很多客户都是……我们只是说不是精通计算机的人群，IE 包含他们的很多浏览器。

此外:这是我的第一个 jQuery 应用程序，所以我可能做了一些非常糟糕的事情。

感谢您的帮助。

Answer 1

我稍微清理了您的代码并更改了问题和答案的显示和隐藏。希望对你有用。

var score = 0;
var $answerDisplay = $('#answerDisplay');
var $responseDisplay = $('#responseDisplay');
var $questionDisplay = $('#questionDisplay');
var $instructions = $('#instructions');

$('#getStarted').click(function() {
    var $this = $(this);
    $this.hide('fast');

    $instructions.hide('slow');

    $.ajax({
        url: "scripts/quizProgress.php",
        data: "questionNumber=1",
        success: function(xml) {
            var question = $(xml).find("text:[type=question]").text();
            $questionDisplay.append(question);
            $questionDisplay.show('slow');

            $(xml).find("answer").each(function() {
                var $this = $(this);
                var id = $this.attr('id');
                var answerText = $this.find("text").text();
                var tbi = "<p correct='";

                if ($this.find("correct").text() == '0') {
                    tbi += "no";
                } else {
                    tbi += "yes";
                }

                tbi += "' id='" + id + "'>" + answerText + "</p>";

                $answerDisplay.append(tbi);

                var responseText = $this.find('response').text();
                var responseInsert = "<p id='re" + id + "' class='hideResponse'>" + responseText + "</p>";

                $responseDisplay.append(responseInsert);
            });

            $answerDisplay.show('slow');
        }
    });
});

$answerDisplay.find('p').hover(function() {
    $(this).addClass("answerHover");
}, function() {
    $(this).removeClass('answerHover');
}).click(function() {
    var $p = $(this);

    $p.addClass('selectedAnswer');

    if ($p.attr('correct') == 'yes') {
        score++;
    }

    $p.parent().find(':not(.selectedAnswer)').hide('slow');
    $responseDisplay.find('p#re' + $p.attr('id')).removeClass('hideResponse').show('slow').addClass('showResponse');
});