Question

我有一些电影，我想在它们上面张贴海报。我尝试为所有项目制作一个循环，并使用带有OMDb API的getJSON来获取海报链接，但它似乎只影响最后一项。我理解JavaScript，但是当涉及到jQuery时，我完全迷失了。我很感激任何帮助。没有愚蠢的问题，对吗？：）

我会让代码完成其余的讨论......

<!DOCTYPE html>
<html>
  <head>
    <title>A-frame room</title>
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
        <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4">   </a-plane>
        <a-sky color="#ffffff"></a-sky>
        <a-curve type="CatmullRom" curve="closed:true" visible="true">
            <a-curve-point id="checkpoint1" position="0 0 -4" visible="true"></a-curve-point>
            <a-curve-point id="checkpoint2" position="0 10 -4" visible="true"></a-curve-point>
            <a-curve-point id="checkpoint3" position="0 10 -8" visible="true"></a-curve-point>
            <a-curve-point id="checkpoint4" position="0 0 -8" visible="true"></a-curve-point>
        </a-curve>
    </a-scene>
  </body>
</html>

请注意，HTML代码和变量不能更改，因为它们是其他脚本的一部分。

Answer 1

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

从那里你可以使用jQuery循环遍历li元素，在其中找到href的{{1}}。我修改了逻辑以使IMDB Id将值除以a，这应该更加健壮。只需更改为/网址即可轻松破解您当前的方法。然后，您可以请求获取海报URL。完成后，您可以创建新的https://元素，根据需要设置img。试试这个：

＆＃13;

src

＆＃13;

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();

＆＃13;

Answer 2

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

-DbuildVersion=

请参阅以下jsfiddle链接查看工作演示

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

GetJSON只影响最后一个元素

2 个答案: