jQuery应用程序锁定IE8完全|工作在其他一切都很好

jQuery App locks IE8 up Entirely | Works in everything else just fine

本文关键字:其他 很好 工作 锁定 应用程序 IE8 完全 jQuery      更新时间:2023-09-26

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

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

我试过使用Firebug Lite,但是没有办法从它那里得到任何反馈,因为IE在很大程度上冻结了。

javascript在下面,链接到实际的例子在这里。

 <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("answerswer").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("answerswerHover");
                                        }, 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应用程序,所以可能我做了一些绝对可怕的事情。

谢谢你的帮助。

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

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("answerswer").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("answerswerHover");
}, 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');
});

我想这可能与:

(美元)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');

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

相关文章: