Мой код cssjson не влияет на мой div - PullRequest
0 голосов
/ 01 октября 2011
<!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, который я добавил, кажется, не работает.Любая помощь будет принята с благодарностью.

Страницу в том виде, в каком она есть, можно посмотреть здесь

1 Ответ

0 голосов
/ 02 октября 2011
var cssjson = {
  ".percentage_bar_complete":{
     "width":"data.percentage_complete"
  }
}

вы устанавливаете свойство ширины в значение (string) "data.percentage_complete" вместо значения переменной data.percentage_complete. уберите двойные кавычки вокруг имени переменной.

...