МОЙ cssjson-код not не влияет на мой div

#css #json #jsonp

Вопрос:

 <!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-aconcaguaamp;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%, чтобы указать пустую строку, а другой с шириной в процентах, полученной из JustGiving JSON feed «percentage_complete».

Однако добавленный мной CSSJSON-код, похоже, не работает. Буду признателен за любую помощь.

Страницу в ее нынешнем виде можно посмотреть здесь http://www.adam-poole.co.uk/test/jg.html

1. Привет, Адам, у меня есть разработчик api.jo.je , если у вас есть какие-либо запросы, связанные с API, или функциональные запросы / отзывы и т.д., пожалуйста, дайте мне знать! Моя электронная почта / twitter включена api.jo.je/justgiving или @easyjo

Ответ №1:

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

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

1. Привет, Dvir, спасибо за ответ и извинения, мне потребовалось так много времени, чтобы ответить. Я попытался удалить двойные кавычки из имени переменной, но это не имело никакого значения. Есть еще идеи?

2. @ratpuddle ты уверен? потому что я попробовал это сам, и это исправило это. Чтобы прояснить, третья строка должна быть "width": data.percentage_complete вместо того, что сейчас.

3. Я попробовал еще раз, но удалил двойные кавычки, как указано. «width»: data.percentage_complete Похоже, я все еще не получаю требуемого результата. У вас появилась цветная полоса поверх серой?

4. @ratpuddle: с этим связаны две проблемы. Первый — это тот, который я сказал, а второй — что, черт возьми, должен делать этот styleStr? Это не способ изменить свойства CSS после загрузки DOM, и даже если бы это было так, вы все равно нигде не используете эту переменную. Вам нужно попробовать что-то вроде: $(".percentage_bar_complete").css("width", data.percentage_complete "%"); вместо этого styleStr.

5. Спасибо, что продолжаете со мной. Это была моя первая попытка CSSJSON, и, похоже, я выбрал плохой пример кода для работы. Вы были правы в разделе styleStr, и проблема заключалась в var. Я удалил это и добавил приведенный выше код, и он работает отлично. Еще раз спасибо.