时间戳

首页 > 解决方案 > 如何用新的图像替换图像，而不是在 API 提交后添加到页面？

javascript - 如何用新的图像替换图像，而不是在 API 提交后添加到页面？

问题描述

我正在构建一个随机 DogAPI 图像生成器，您将 1-50 的数字放入表单文本框中，点击发送，它会显示该数量的随机狗照片。

该页面正在运行，但是当您选择一个新的或相同的数字时，它会将新数量的照片添加到页面中，而不是替换它们。帮助！

'use strict';

function getDogImage(text) {
  fetch(`https://dog.ceo/api/breeds/image/random/${text}`)
    .then(response => response.json())
    .then(responseJson => displayResults(responseJson));
}

function watchForm() {
  $('form').submit(event => {
    event.preventDefault();
    var text = $('.number').val();
    if (text < 50) {
      getDogImage(text);
    } else {
      alert('Number must be between 1-50')
    };
  });
}

function displayResults(responseJson) {
  console.log(responseJson);
  for (let i = 0; i < responseJson.message.length; i++) {
    $('.results').append(
      `<img src="${responseJson.message[i]}" class="results-img">`
    )
  };

  $('.results').removeClass('hidden');
}

$(function() {
  console.log('App loaded! Waiting for submit!');
  watchForm();
});
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
}

.container {
  max-width: 600px;
  margin: 0 auto;
}

.hidden {
  display: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>How Many?</title>
  <link rel="shortcut icon" href="#">
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div class="container">
    <h1>How Many Dog Pics Do You Want?</h1>
    <p>Pick a number between 1-50</p>
    <form>
      <input class="number" value="3" type="text" placeholder="1-50?" required>
      <input type="submit" value="Show me the doggies!">
    </form>
    <section class="results hidden">
      <h2>Here you go!</h2>
    </section>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  <script src="index.js"></script>
</body>

</html>

标签： javascriptjqueryhtmlapi

解决方案

我会清除结果 div 的内容，然后添加新图像。不过，要做到这一点，我需要进行一些更改：

首先，将div<h1>移出。.results然后，在附加图像的循环之前，使用.empty()清除结果 div 的内容。然后您的循环将运行并用新图像填充它。

'use strict';

function getDogImage(text) {
  fetch(`https://dog.ceo/api/breeds/image/random/${text}`)
    .then(response => response.json())
    .then(responseJson => displayResults(responseJson));
}

function watchForm() {
  $('form').submit(event => {
    event.preventDefault();
    var text = $('.number').val();
    if (text < 50) {
      getDogImage(text);
    } else {
      alert('Number must be between 1-50')
    };
  });
}

function displayResults(responseJson) {
  console.log(responseJson);
  $('.results').empty();
  for (let i = 0; i < responseJson.message.length; i++) {
    $('.results').append(
      `<img src="${responseJson.message[i]}" class="results-img">`
    )
  };

  $('.results').removeClass('hidden');
}

$(function() {
  console.log('App loaded! Waiting for submit!');
  watchForm();
});
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
}

.container {
  max-width: 600px;
  margin: 0 auto;
}

.hidden {
  display: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>How Many?</title>
  <link rel="shortcut icon" href="#">
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div class="container">
    <h1>How Many Dog Pics Do You Want?</h1>
    <p>Pick a number between 1-50</p>
    <form>
      <input class="number" value="3" type="text" placeholder="1-50?" required>
      <input type="submit" value="Show me the doggies!">
    </form>
    <h2>Here you go!</h2>
    <section class="results hidden">
    </section>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  <script src="index.js"></script>
</body>

</html>

推荐阅读