Question

我想随机从JSON文件中获取这12个图像（或更多），并在每次刷新时将它们显示在6个div中。我可以通过以下方法获得此解决方案。但我需要通过从JSON文件中读取来获得相同输出的解决方案。

感谢您的宝贵意见。

JS：

$('.ir_image_holder .ir_img_src').each(function() {
  var num = Math.floor(Math.random() * 20 + 1),
    img = $(this);
  img.attr('src', '/img/instant_rewards/prize' + num + '.jpg');
  img.attr('data-block', num);
});

HTML：

<div class="ir_game_container">
    <div class="ir_game_window_container">
        <div class="ir_image_holder">
            <img class="ir_img_src" src=" " data-block="" data-rewardpoints="" />
        </div>
    </div>
    <div class="ir_game_window_container">
        <div class="ir_image_holder">
            <img class="ir_img_src" src=" " data-block="" data-rewardpoints="" />
        </div>
    </div>
    <div class="ir_game_window_container">
        <div class="ir_image_holder">
            <img class="ir_img_src" src=" " data-block="" data-rewardpoints="" />
        </div>
    </div>
    <div class="ir_game_window_container">
        <div class="ir_image_holder">
            <img class="ir_img_src" src=" " data-block="" data-rewardpoints="" />
        </div>
    </div>
    <div class="ir_game_window_container">
        <div class="ir_image_holder">
            <img class="ir_img_src" src=" " data-block="" data-rewardpoints="" />
        </div>
    </div>
    <div class="ir_game_window_container">
        <div class="ir_image_holder">
            <img class="ir_img_src" src=" " data-block="" data-rewardpoints="" />
        </div>
    </div>
</div>

JSON：

{
 "imageList": [
  {
    "image_1": "/img/prize1.jpg",
    "image_2": "/img/prize2.jpg",
    "image_3": "/img/prize3.jpg",
    "image_4": "/img/prize4.jpg",
    "image_5": "/img/default.jpg",
    "image_6": "/img/default.jpg",
    "image_7": "/img/default.jpg",
    "image_8": "/img/default.jpg",
    "image_9": "/img/default.jpg",
    "image_10": "/img/default.jpg",
    "image_11": "/img/default.jpg",
   }
 ]
}

Answer 1

您必须将JSON解析为数组。有几种方法可以做到这一点，最简单的方法可能是使用ES2105 Object.values()。像这样：

var array = Object.values(json);

详细了解MDN上的Object.values()：

Object.values（）方法返回给定对象自身的可枚举属性值的数组，其顺序与for ... in循环提供的顺序相同（不同之处在于for-in loop枚举原型链中的属性。）

这是你的工作演示：

＆＃13;

var json = {
 "imageList": [
  {
    "image_1": "/animals/1",
    "image_2": "/animals/2",
    "image_3": "/animals/3",
    "image_4": "/animals/4",
    "image_5": "/animals/5",
    "image_6": "/cats/1",
    "image_7": "/cats/2",
    "image_8": "/cats/3",
    "image_9": "/cats/4",
    "image_10": "/cats/5",
    "image_11": "/cats/6",
   }
 ]
};

var arr = Object.values(json.imageList[0]);

$('.ir_image_holder .ir_img_src').each(function() {
  var num = Math.floor(Math.random() * 11 + 1),
    img = $(this);
  img.attr('src', 'http://lorempixel.com/100/100' + arr[num] + '');
  img.attr('data-block', num);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="ir_game_container">
    <div class="ir_game_window_container">
        <div class="ir_image_holder">
            <img class="ir_img_src" src=" " data-block="" data-rewardpoints="" />
        </div>
    </div>
    <div class="ir_game_window_container">
        <div class="ir_image_holder">
            <img class="ir_img_src" src=" " data-block="" data-rewardpoints="" />
        </div>
    </div>
    <div class="ir_game_window_container">
        <div class="ir_image_holder">
            <img class="ir_img_src" src=" " data-block="" data-rewardpoints="" />
        </div>
    </div>
    <div class="ir_game_window_container">
        <div class="ir_image_holder">
            <img class="ir_img_src" src=" " data-block="" data-rewardpoints="" />
        </div>
    </div>
    <div class="ir_game_window_container">
        <div class="ir_image_holder">
            <img class="ir_img_src" src=" " data-block="" data-rewardpoints="" />
        </div>
    </div>
    <div class="ir_game_window_container">
        <div class="ir_image_holder">
            <img class="ir_img_src" src=" " data-block="" data-rewardpoints="" />
        </div>
    </div>
</div>

＆＃13;

从json随机生成图像并在div容器中显示

1 个答案: