我正在尝试创建一个数组,对其进行 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
}]
}
关于javascript - JSON 从 css 解析图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36607250/