Question

<!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代码似乎不起作用。任何帮助将不胜感激。

可以在http://www.adam-poole.co.uk/test/jg.html

查看此页面

Answer 1

var cssjson = {
  ".percentage_bar_complete":{
     "width":"data.percentage_complete"
  }
}

您将width属性设置为(string) "data.percentage_complete"的值，而不是变量data.percentage_complete的值。删除变量名称周围的双引号。

我的css js代码不会影响我的div

1 个答案: