<!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 提要“percentage_complete”中提取的百分比宽度。
但是我添加的 CSSJSON 代码似乎不起作用。任何帮助将不胜感激。
可以在这里查看页面原样http://www.adam-poole.co.uk/test/jg.html
最佳答案
var cssjson = {
".percentage_bar_complete":{
"width":"data.percentage_complete"
}
}
您将宽度属性设置为 (string) "data.percentage_complete" 的值，而不是变量 data.percentage_complete 的值。去掉变量名两边的双引号。
关于css - 我的 css json 代码不影响我的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7621346/