Я создал простое одностраничное приложение, используя Flickr API, для отображения 25 изображений на основе ключевых слов, введенных в поле поиска. Каждый новый поиск должен заменить предыдущие результаты поиска в div. Это работает, однако, я получаю только одно изображение для публикации вместо 25, которые я запросил «per_page».

Первоначально я пытался использовать метод добавления, который дал мне 25 моих изображений, однако, как и ожидалось, вместо обновления с каждым новым поиском, он просто добавил новые результаты в конец предыдущих результатов. Я также попробовал метод empty (), чтобы очистить результаты, но я все еще получал только одно изображение для публикации. Затем я попытался .replaceWith () и не получил никаких результатов. Я начинаю спрашивать себя, возможно, проблема связана с порядком моего кода.

РЕДАКТИРОВАТЬ: Это работает, если я использую «.append» вместо «.html», однако это не очищает div #images и заменяет старые данные.

{amp}lt;body{amp}gt; {amp}lt;div class="navbar"{amp}gt; {amp}lt;input type="text" id="content"{amp}gt; {amp}lt;button id="submit", type="submit" class="button"{amp}gt;GO!{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="container"{amp}gt; {amp}lt;div id="images"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;!--script--{amp}gt; {amp}lt;script{amp}gt; $(document).ready(function () { $("#submit").click(function (event) { var searchVal = $("#content").val(); var flickrAPI = "https://api.flickr.com/services/rest/?method=flickr.photos.search{amp}amp;api_key=//KEY_GOES_HERE//c{amp}amp;nojsoncallback=1"; $.getJSON( flickrAPI, { tags: searchVal, per_page: 25, //safeSearch safe_search: 1, format: "json" }, function( data ) { $.each( data.photos.photo, function( i, item ) { var url = 'https://farm'   item.farm   '.staticflickr.com/'   item.server   '/'   item.id   '_'   item.secret   '.jpg'; $('#images').html('{amp}lt;img src="'   url   '"/{amp}gt;'); }); }); }); }); {amp}lt;/script{amp}gt; 

Мой ожидаемый результат состоял в том, чтобы API Flickr разместил 25 картинок, основываясь на том, что напечатано в окне поиска. Если пользователь выполняет новый поиск, 25 новых результатов должны заменить предыдущие результаты.

очистка элемента #images перед циклом возврата возвращаемых данных. затем добавьте каждый элемент внутри цикла в div #images

 {amp}lt;body{amp}gt; {amp}lt;div class="navbar"{amp}gt; {amp}lt;input type="text" id="content"{amp}gt; {amp}lt;button id="submit", type="submit" class="button"{amp}gt;GO!{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="container"{amp}gt; {amp}lt;div id="images"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;!--script--{amp}gt; {amp}lt;script{amp}gt; $(document).ready(function () { $("#submit").click(function (event) { var searchVal = $("#content").val(); var flickrAPI = "https://api.flickr.com/services/rest/?method=flickr.photos.search{amp}amp;api_key=//KEY_GOES_HERE//c{amp}amp;nojsoncallback=1"; $.getJSON( flickrAPI, { tags: searchVal, per_page: 25, //safeSearch safe_search: 1, format: "json" }, function( data ) { $('#images').empty(); //clear div here $.each( data.photos.photo, function( i, item ) { var url = 'https://farm'   item.farm   '.staticflickr.com/'   item.server   '/'   item.id   '_'   item.secret   '.jpg'; $('#images').append('{amp}lt;img src="'   url   '"/{amp}gt;'); //append data here }); }); }); }); {amp}lt;/script{amp}gt;