jQuery的背景图像JSON的问题，URL（“”）追加为空

-1

所以我有下面的代码，而这一切工作完全正常，除了.css('background-image')变化。你会看到url("");是空的。不知道为什么，我希望也许有人可以快速查看，让我知道什么可能是错的？我只提供了代码，因为除了这一块外，其他所有工作都可以使用。jQuery的背景图像JSON的问题，URL（“”）追加为空

HTML（后jQuery的已追加的话）：

<td class="RarityBG" style="background-image: url("");"> 
    <img src="img/trinket/trinket01.png"> 
</td>

的jQuery（注意，html的追加工程100％）：

var trinketJSON 
    $.getJSON('js/trinket.json', function (data) { 
     trinketJSON = data; 
     console.log(trinketJSON); 

     $.each(trinketJSON, function(i, item) { 
      $('<tr>').html(
       "<td class='RarityBG'><img src='" + trinketJSON[i].TrinketIMG + "' /></td><td>" + trinketJSON[i].TrinketName + "</td><td>" + trinketJSON[i].Rarity + "</td><td>" + 
       trinketJSON[i].EffectOne + "</td><td>" + trinketJSON[i].EffectTwo + "</td><td>" + trinketJSON[i].EffectThree + "</td><td>" 
       + trinketJSON[i].SetBonus + "</td>").appendTo('#trinketsTable'); 
      $('.RarityBG').css('background-image', 'url(' + trinketJSON[i].RarityBG + ')'); 
      }); 
     });

JSON：

{ 
    "TrinketIMG": "img/trinket/trinket01.png", 
    "TrinketName": "Trinket 01", 
    "Rarity": "Common", 
    "RarityBG": "img/trinket/rarity_common.png", 
    "EffectOne": "+4 ACC", 
    "EffectTwo": "-1 SPD", 
    "EffectThree": "", 
    "SetBonus": "" 
    }

来源

2017-07-17 dbrree

看起来你并没有在引号中包裹'trinketJSON [i] .RarityBG'。我会从那里开始，看看它是否更喜欢你的HTML。 –

如果你尝试'console.log（trinketJSON [i]）;'在你的'.each'循环中，你会得到什么？另外，我不喜欢在动态创建的html中编写内联样式，而更喜欢现有的css类，然后将该类添加到元素中。反正更容易维护;特别是如果您必须稍后再重复一次。 – Difster

@Difster我得到所有JSON项目的日志，所以这个工程。它还显示我的RarityBG项目。 – dbrree

非工作：

 $.each(trinketJSON, function(i, item) { 
      $('<tr>').html(
       "<td class='RarityBG'><img src='" + trinketJSON[i].TrinketIMG + "' /></td><td>" + trinketJSON[i].TrinketName + "</td><td>" + trinketJSON[i].Rarity + "</td><td>" + 
       trinketJSON[i].EffectOne + "</td><td>" + trinketJSON[i].EffectTwo + "</td><td>" + trinketJSON[i].EffectThree + "</td><td>" 
       + trinketJSON[i].SetBonus + "</td>").appendTo('#trinketsTable'); 
      $('.RarityBG').css('background-image', 'url(' + trinketJSON[i].RarityBG + ')'); 
      }); 
     });

工作：

 $.each(trinketJSON, function(i, item) { 
      $('<tr>').html(
       '<td style=\'background-image: url("' + trinketJSON[i].RarityBG + '");\'><img src="' + trinketJSON[i].TrinketIMG + '" /></td><td>' + trinketJSON[i].TrinketName + "</td><td>" + trinketJSON[i].Rarity + "</td><td>" + 
       trinketJSON[i].EffectOne + "</td><td>" + trinketJSON[i].EffectTwo + "</td><td>" + trinketJSON[i].EffectThree + "</td><td>" 
       + trinketJSON[i].SetBonus + "</td>").appendTo('#trinketsTable'); 
     });

来源

2017-07-17 19:33:55 dbrree

你也可以摆脱each如果不通过它需要循环每次。

<script> 
    var trinketJSON 
    $.getJSON('js/trinket.json', function (data) { 
     trinketJSON = data; 
     console.log(trinketJSON); 
     // just removed this for now 
     $('.RarityBG').css('background-image', 'url(' + trinketJSON.RarityBG + ')'); 
      //console.log("RarityBG" + trinketJSON.RarityBG); 
     }); 
    </script>

上面的脚本将能够访问所有json键，并且也会填充url。尝试一下。

来源

2017-07-17 19:34:49 bhansa

感谢您添加此。在这种特殊情况下，我需要循环，但这是一个很好的信息。 – dbrree

jQuery的背景图像JSON的问题，URL（“”）追加为空

回答

相关问题