jQuery应用程序锁定IE8完全|工作在其他一切都很好
jQuery App locks IE8 up Entirely | Works in everything else just fine
我正在为我的公司做一个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');
但是说实话,我不知道动画内部是如何工作的,所以我不完全确定这是否会更快。
- 我如何才能让CasperJS和PhantomJS在约塞米蒂玩得很好
- 在Javascript中使用全局变量作为缓存是很好的
- 我在下拉列表中尝试了下一个和前五年的html代码.接下来的5年我都过得很好.我怎样才能拿到之前的5年
- JavaScript中的OOP太令人困惑了,ES6很棒,但没有得到很好的支持,该怎么办
- "此网站似乎使用滚动链接定位效果.这可能不能很好地与异步平移一起工作;
- html5:一个很好的加载方法
- mootools 1.4.2和angular 1.3在ie8中配合得很好
- Javascript是一个很好的日期选择器和时间选择器库
- JQuery插件不适用于codepen,在其他地方也很好
- Meteor findOne查询在一个模板助手中返回未定义的结果.在其他模板助手中,同样的查询也能很好地工作
- 它本身很好,但当我把它放在我的其他形式时就会爆炸
- API不共享URL链接(其他数据很好)
- FabricJS没有给我movementX和movementY在IE中平移图像,但它在其他浏览器中工作得很好
- 引导导航,长链接在IE上走两行,在其他地方很好.如何修复
- setInterval在Chrome中工作一次,但在其他浏览器中很好
- Angular JS过滤UNIX时间,认为它是1970年,其他都很好
- jQuery应用程序锁定IE8完全|工作在其他一切都很好
- Javascript在索引页上加载得很好,但在其他页面上则不行
- 为什么它不适用于阶级".1〃;在数组中,并且可以很好地用于其他类
- Google TableChart不能很好地与页面上的其他图表配合使用