这个问题在这里已经有了答案：
循环中的JavaScript闭包 - 简单的实际例子 36个答案我有一些电影，我想在他们上面张贴海报。 我试着为所有项目制作循环，并使用带有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代码和变量是其他脚本的一部分，因此无法更改。
This question already has an answer here:
JavaScript closure inside loops – simple practical example 43 answersI have some movies which I'd like to have posters above them. I tried making a loop for all items and using getJSON with OMDb API to get poster link, but it seem so affect only the last item. I understand JavaScript, but when it comes to jQuery I'm completely lost. I'd appreciate any help. There's no dumb questions, right? :)
I'll let the code do the rest of the talking...
<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>Please keep in mind that HTML code and variables cannot be changed due to them being a part of other scripts.
最满意答案
你的第一个问题是你的HTML无效。 a元素不能是ul子元素。 你需要把它们放在里面。
从那里你可以使用jQuery来遍历li元素，找到其中的a的href 。 我修改了逻辑来让IMDB Id将值分割为/ ，这应该更加健壮。 您只需更改为https://网址即可轻松破解当前的方法。 然后，您可以提出请求以获取海报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>
Your first issue is that your HTML is invalid. The a elements cannot be children of the ul. You need to place them inside the li.
From there you can use jQuery to loop over the li elements, finding the href of the a within them. I amended the logic to get the IMDB Id to split the value by the / which should be a lot more robust. Your current method would easily be broken simply by changing to https:// URLs. You can then make the request to get the poster URL. Once that completes you can create the new img element, setting the src as required. Try this:
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>
更多推荐
发布评论