美文网首页
FCC-JS-JQ-Render Images from Dat

FCC-JS-JQ-Render Images from Dat

作者: zhang_yongfeng | 来源:发表于2018-10-26 21:30 被阅读0次

从上节课获得的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>

相关文章

网友评论

      本文标题:FCC-JS-JQ-Render Images from Dat

      本文链接:https://www.haomeiwen.com/subject/kialtqtx.html