javascript - JSON 从 css 解析图像

Question

我正在尝试创建一个数组，对其进行 JSON 解析，并将其分配给一个 css 背景图像。

这是我所拥有的:(javascript)

var imgs =  '{"num":[{"value": 1}, {"value": 2}, {"value": 3}, {"value": 4}, {"value": 5}, {"value": 6}, {"value": 7}, {"value": 8}, {"value": 9}]}';
console.log(imgs);
var img = JSON.parse(imgs);

来自 CSS 的图像:

div#gamearea4x4 div.row1#ga4r12{
    background-image: url(../graphics/1.png);
    width: 50px;
    height: 50px;

我现在想做的就是从 css 获取背景图像并将这些值分配给图像(例如:1.png 的值为 1，2png 的值为 2，等等)另外，我不能专门使用 div 标签，因为这些图像将被随机化(例如:#ga4r12 id 可以有 1.png、2.png、3.png 等)

我应该怎么做？

Answer 1

随机分配背景给 div。你需要指定一个容器，否则你所有的 div 都会被分配一个图像

var imgs =  '{"num":[{"value": 1}, {"value": 2}, {"value": 3}, {"value": 4}, {"value": 5}, {"value": 6}, {"value": 7}, {"value": 8}, {"value": 9}]}';
var img = JSON.parse(imgs);
$("div").each(function(){
  $(this).attr('style','background-image:url(../graphics/'+ img.num[Math.floor(Math.random()*img.num.length)].value + '.png)')
})

此外，您可以像这样创建一个对象

var imgs =
 {
  num: [{
    value: 1
  }, {
    value: 2
  }, {
    value: 3
  }, {
    value: 4
  }, {
    value: 5
  }, {
    value: 6
  }, {
    value: 7
  }, {
    value: 8
  }, {
    value: 9
  }]
}