JSON从css解析图像

JSONparse images from css

本文关键字：图像 css JSON      更新时间：2024-06-18

我正在尝试制作一个数组，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等）

我该怎么做？

随机为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
  }]
}
相关文章：