<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/common.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type='text/javascript'>
$(function() {
$.getJSON('http://api.jo.je/justgiving/jsonp.php?d=expedition-aconcagua&callback=?', {}, function (data) {
$('#title').html(data.title);
$('#target').html(data.donations_target);
$('#raised').html(data.donations_total);
$('#percent').html(data.percentage_complete);
$('#charity').html(data.charity);
$('#charity_details').html(data.charity_details);
$('#charity_logo').html(data.charity_logo);
var donations = "";
$.each(data.donations, function(index, value) {
if (index < 3)
{
donations = donations + "<strong>" + value.person + "</strong>" + value.amount + "<br />" + value.message + "<br />";
}
});
$('#donations').html(donations);
var cssjson = {
".percentage_bar_complete":{
"width":"data.percentage_complete"
}
}
var styleStr = "";
for(var i in cssjson){ styleStr += i + " {\n"
for(var j in cssjson[i]){
styleStr += "\t" + j + ":" + cssjson[i][j] + ";\n"
}
styleStr += "}\n"
}
})
});
</script>
</head>
<body>
<h2><span id='title'></span></h2>
<h3><span id='charity'></span></h2>
<div><img src="<span id='charity_logo'></span>" /><span id='charity_logo'></span></div>
<h3>Target <span id='target'></span>, <span id='raised'></span> raised</h3>
<h4>Percentage Complete - <span id='percent'></span>%</h4>
<div class="percentage_bar">
<div class="baseline">
<p>0%</p>
</div>
<div class="total">
<p>100%</p>
</div>
<br clear="all" />
<div class="percentage_bar_bg">
<div class="percentage_bar_complete">
</div>
</div>
</div>
<h3>Most recent donations</h3>
<div id='donations'></div>
我很难让JSON的CSS部分工作。目的是让两个div层一个在另一个的顶部,底部宽度为100%以指示空条,另一个具有从JustGiving JSON提要“percent_complete”中绘制的百分比宽度。
然而,我添加的CSSJSON代码似乎不起作用。任何帮助将不胜感激。
查看此页面答案 0 :(得分:0)
var cssjson = {
".percentage_bar_complete":{
"width":"data.percentage_complete"
}
}
您将width属性设置为(string) "data.percentage_complete"
的值,而不是变量data.percentage_complete
的值。删除变量名称周围的双引号。