<!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>
У меня проблемы с настройкой CSS-части JSON для работы.Намерение состоит в том, чтобы иметь два div-слоя один верх другого, нижний с шириной 100% для обозначения пустой полосы, а другой - с шириной в процентах, взятой из ленты JSON JustGiving «процент_компонента».Однако код CSSJSON, который я добавил, кажется, не работает.Любая помощь будет принята с благодарностью.
Страницу в том виде, в каком она есть, можно посмотреть здесь