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');
});

Answer 2

我认为可能与：

$（本）.hide（ “慢”）;

您为每个未选择的答案触发单独的动画。

我不确定，但是如果你为所有你想要隐藏的东西触发了一个.hide（），那么它可能运行得更快。

也许您可以对代码进行重新分解，使其首先标记所选答案并隐藏其他所有代码。

也许，替换这个：

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');
    }

用这个：

$(this).addClass('selectedAnswer');
$('#answerDisplay').find('p').not('.selectedAnswer').hide('slow');

但说实话，我并不确切知道动画内部是如何工作的，所以我不完全确定这是否会更快。

jQuery App完全锁定IE8 |在其他一切工作正常

2 个答案: