FCC-JS-JQ-Render Images from Data Sources-从数据源渲染图像

从上节课获得的JSON数组中,每个对象都包含了一个以imageLink为键(key),以猫的图片的url为值(value)的键值对。
当我们在遍历这些对象时,我们用imageLink的属性来显示img元素的图片。
代码如下:

html += "<img src = '" + val.imageLink + "'>”;

示例

<script>
  $(document).ready(function() {

    $("#getMessage").on("click", function() {
      $.getJSON("/json/cats.json", function(json) {

        var html = "";

        json.forEach(function(val) {

          html += "<div class = 'cat'>";

          // 请把你的代码写在这条注释以下
          html += "<img src ='" + val.imageLink + "'>";
          
          
          // 请把你的代码写在这条注释以上

          html += "</div>";

        });

        $(".message").html(html);

      });
    });
  });
</script>

<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,009评论 19 139
  • width: 65%;border: 1px solid #ddd;outline: 1300px solid #...
    邵胜奥阅读 4,894评论 0 1
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,770评论 1 45
  • 文/Meetingtian 这是一个想象力缺乏的时代,每个人都有自己的写作故事,之于写作我也来谈谈自己的几点想法。...
    MeetingTian阅读 188评论 2 8
  • 放债的,借债的,都是侥幸,都是赌命。讨债的,欠债的,都是冤孽,都是苟活。 (本文不是案情的真实摹写,而是以此为素材...
    干国祥备课老干阅读 22,763评论 143 25