GetJSON 只影响最后一个元素

Question

我有一些电影，我想在它们上面贴上海报。我尝试为所有项目制作一个循环，并使用 getJSON 和 OMDb API 来获取海报 link，但它似乎只影响最后一个项目。我理解 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 代码和变量不能更改，因为它们是其他脚本的一部分。

Answer 1

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

从那里您可以使用 jQuery 遍历 li 元素，在其中找到 a 的 href。我修改了逻辑，让 IMDB Id 将值除以 /，这应该更可靠。只需更改为 https:// URLs，您当前的方法就很容易被破坏。然后，您可以提出获取海报的请求 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>

Answer 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 link 以查看工作演示

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

GetJSON 只影响最后一个元素

GetJSON Affecting Only Last Element

javascript

jquery

loops

getjson