嗨,我实际上是一个使用javascript和html/css的新手。
我不明白为什么我的剧本适用于safari,但不适用于chrome和firefox。。。有什么想法吗?
编辑:铬和萤火虫中的ul和li元素都没有显示。。。此外,以前的警报也不起作用。我会检查控制台中的错误,并再次编辑文章
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="patients" style="text-align:center">
</div>
<script type="text/javascript">
$.getJSON("http://www.url.com/json",
function(data) {
var items = [];
alert(data[1].patient);
alert(data[1].hr);
$.each(data, function(index, val) {
items.push('<li id="' + index + '">' + val.patient + '<div style="display: none" id="'+val.patient+'"></div></li>');
});
$('<ul/>', {
'class': 'my-new-list',
html: items.join('')
}).appendTo('#patients');
});
</script>
</body>
</html>
您必须了解的第一件事是javascript在页面上执行的时间。
因此,在您发布的代码中,浏览器首先加载jquery库。当它遇到您的<script>
标记时,它会尝试执行$.getJSON()
函数。
在您的脚本中,json请求成功完成后,它将尝试通过向#patients
添加生成的html来修改DOM。这在100%的情况下都不起作用,因为你不能保证浏览器已经渲染了#患者。
您应该首先将javascript代码包装在一个只在页面加载后执行的包装器中。
这可以通过几种方式实现。这些是jQuery特定的方法,因为这就是您正在使用的方法。
$(document).ready(function(){
//your code
});
或者:
$(function(){
//your code
});
本地javascript代码看起来像:
document.addEventListener('load', function(){
//your code
}, false);
我建议使用一种jQuery方法。
作为附加提示,您不需要将type="text/javascript"
放在脚本标记中。所有浏览器都知道script标记的意思是javascript。幸运的是,我们已经远远超过了旧时代的各种坏版本的Internet Explorer。