GetJSON仅影响最后一个元素[重复]答案

【问题标题】：GetJSON Affecting Only Last Element [duplicate]GetJSON仅影响最后一个元素[重复]
【发布时间】：2017-04-29 04:05:54
【问题描述】：

我有一些电影，我想在它们上面放海报。我尝试为所有项目创建一个循环，并使用带有 OMDb API 的 getJSON 来获取海报链接，但它似乎只影响最后一个项目。我了解 JavaScript，但说到 jQuery，我完全迷路了。我会很感激任何帮助。没有愚蠢的问题，对吧？ :)

我会让代码完成剩下的工作......

<html>
  <head>
    <script src="http://code.jquery.com/jquery-3.2.1.js"></script>
  </head>
  <body>
    <ul>
      <a href="http://www.imdb.com/title/tt1232829/" target="_blank"><li><h1>21 Jump Street</h1><h2>2012</h2></li></a>
      <a href="http://www.imdb.com/title/tt2294449/" target="_blank"><li><h1>22 Jump Street</h1><h2>2014</h2></li></a>
      <a href="http://www.imdb.com/title/tt1637725/" target="_blank"><li><h1>Ted</h1><h2>2012</h2></li></a>
    </ul>   
    <script>
      function appendPosters() {    
        var lis = document.getElementsByTagName("li");
        for (i = 0; i < lis.length; i++) {                        
          var newImg = document.createElement("img");

          lis[i].appendChild(newImg);
          lis[i].insertBefore(lis[i].lastChild, lis[i].firstChild);

          var getA = lis[i].parentElement;
          var imdbLink = getA.getAttribute("href");
          var imdbId = imdbLink.substr(26, 9);
          var getImg = lis[i].firstChild;

          $.getJSON('http://www.omdbapi.com/?i=' + imdbId).then(function(response) {
            var poster = response.Poster;
            getImg.setAttribute("src", poster);
          });
        }
      }    
      appendPosters();
    </script>    
  </body>
</html>

请记住，由于 HTML 代码和变量是其他脚本的一部分，因此无法更改它们。

【问题讨论】：

$.getJSON 是异步的。当它从服务器获得响应并尝试设置src 时，您的循环已完成，getImg 是最后一个元素。你可以使用闭包来解决这个问题。

标签： javascript jquery loops getjson

【解决方案1】：

您的第一个问题是您的 HTML 无效。 a 元素不能是 ul 的子元素。您需要将它们放在li 中。

从那里您可以使用 jQuery 循环遍历 li 元素，在其中找到 href 和 a。我修改了逻辑以获取 IMDB Id 以将值拆分为 /，这应该更加健壮。只需更改为https:// URL，您当前的方法就很容易被破坏。然后，您可以请求获取海报 URL。完成后，您可以创建新的img 元素，并根据需要设置src。试试这个：

function appendPosters() {
  $("li").each(function() {
    var $li = $(this);
    var urlArr = $li.find('a').prop('href').split('/');
    var imdbId = urlArr[urlArr.length -2];
    
    $.getJSON('http://www.omdbapi.com/?i=' + imdbId).then(function(response) {
      $li.append('<img src="' + response.Poster + '" />');
    });
  });
}

appendPosters();

<html>
<script src="http://code.jquery.com/jquery-3.2.1.js"></script>
<ul>
  <li>
    <a href="http://www.imdb.com/title/tt1232829/" target="_blank">
      <h1>21 Jump Street</h1>
      <h2>2012</h2>
    </a>
  </li>
  <li>
    <a href="http://www.imdb.com/title/tt2294449/" target="_blank">
      <h1>22 Jump Street</h1>
      <h2>2014</h2>
    </a>
  </li>
  <li>
    <a href="http://www.imdb.com/title/tt1637725/" target="_blank">
      <h1>Ted</h1>
      <h2>2012</h2>
    </a>
  </li>
</ul>

【讨论】：

效果很好，谢谢！

【解决方案2】：

使用 jquery 迭代 li 元素并创建图像标签。

function appendPosters() {
    $('li').each(function () {
        var $handler = $(this);
        var imdbId = $(this).parent().attr('href').substr(26, 9);
        getresponse($handler, $handler.parent().attr('href').substr(26, 9), function (data) {
        });
    });
}

function getresponse($handler, imdbId, callback) {
    $.getJSON('http://www.omdbapi.com/?i=' + imdbId).then(function (response) {
        var poster = response.Poster;
        console.log(poster);
        var img = $('<img>'); //Equivalent: $(document.createElement('img'))
        img.attr('src', poster);
        img.appendTo($handler);
        callback(true);
    });
}

请参考下面的 jsfiddle 链接查看工作演示

https://jsfiddle.net/ganesh2412/bmz7ohx5/

【讨论】：