Question

我正在制作一个简单的程序，显示查询/搜索地点的天气状况。一切都很好，但我想知道如何自动重置/清除DOM（或至少显示结果的相关部分），并用新搜索的结果填充它。此时，它会附加结果，除非我手动清除它们（清除按钮）。

而不是复制/粘贴所有代码（HTML / CSS / JS-jQuery），我更喜欢在JSBin中使用它们。所以这里是'app'的link，因此代码的其余部分（HTML和CSS）。

JS / jQuery代码

$(function() { 
  function showWeather() {
    let $title       = $("#station"),
        $description = $("#description"),
        $temperature = $("#temp"),
        $chill       = $("#chill"),
        $wind        = $("#wind"),
        $humidity    = $("#humidity"),
        $units       = $(".units").text(),
        $apiPath1    = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22",
        $query       = $('input#city').val(),
        $apiPath2    = "%2C%20ak%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys",
        $url         = $apiPath1 + $query + $apiPath2;

    $("input#city").val("");

    $.ajax({
      type: "GET", 
      url: $url,
      success: function(data) {
        $title.append(`
          <h3>${data.query.results.channel.item.title}</h3>
        `)
        $description.append(`
          <p>${data.query.results.channel.item.condition.text}</p>
        `)
        $temperature.append(`
          <h1><span id="temp1">${data.query.results.channel.item.condition.temp}</span> &deg;<span class="units">F</span></h1>
        `)
        $chill.append(`
          <p>Feels like: <span id="temp2">${data.query.results.channel.wind.chill}</span> &deg;<span class="units">F</span></p>
        `)
        $wind.append(`
          <p>Wind speed: ${data.query.results.channel.wind.direction} km/h; Wind direction: ${data.query.results.channel.wind.speed}</p>             
        `)
        $humidity.append(`
          <p>Humidity: ${data.query.results.channel.atmosphere.humidity} %</p>    
        `)
      }
    });
  }
  //Converting Fahrenheit to Celsius
  function fahrToCels(F) {
    return Math.round((5/9) * (F - 32));
  }
  //Converting Celsius to back to Fahrenheit 
  function celsToFahr(C) {
    return Math.round((C * 9/5 + 32));
  }

  $("#submit").on("click", function() {
    showWeather();
  });

  $("input#city").on("keypress", function(event) {
    if (event.which === 13) {
      showWeather();
    }
  });

  $('#clear').on('click', function (event) {
    event.preventDefault();
    $('#station, #description, #temp, #chill, #wind, #humidity').empty('');
  });

  $("#tempUnits").on("click", function() {
    let temp1 = Number($("#temp1").text());
        temp2 = Number($("#temp2").text());

    if ($(".units").html() === "C") {
      $(this).html("Temperature in Celsius")
      $("#temp1").html(celsToFahr(temp1));
      $("#temp2").html(celsToFahr(temp2));
      $(".units").html("F");
    } 
    else {
      $(this).html("Temperature in Fahrenheit")
      $("#temp1").html(fahrToCels(temp1));
      $("#temp2").html(fahrToCels(temp2));
      $(".units").html("C");
    }
  });  
});

干杯！

Answer 1

尝试使用html而不是追加

$.ajax({
  type: "GET", 
  url: $url,
  success: function(data) {
    $title.html(`
      <h3>${data.query.results.channel.item.title}</h3>
    `)
    $description.html(`
      <p>${data.query.results.channel.item.condition.text}</p>
    `)
    $temperature.html(`
      <h1><span id="temp1">${data.query.results.channel.item.condition.temp}</span> &deg;<span class="units">F</span></h1>
    `)
    $chill.html(`
      <p>Feels like: <span id="temp2">${data.query.results.channel.wind.chill}</span> &deg;<span class="units">F</span></p>
    `)
    $wind.html(`
      <p>Wind speed: ${data.query.results.channel.wind.direction} km/h; Wind direction: ${data.query.results.channel.wind.speed}</p>             
    `)
    $humidity.html(`
      <p>Humidity: ${data.query.results.channel.atmosphere.humidity} %</p>    
    `)
  }
});

Answer 2

使用

$title.html('<h3>${data.query.results.channel.item.title}</h3>')

而不是

$title.html('<h3>${data.query.results.channel.item.title}</h3>')

将其他$.append(content)替换为$.html(htmlString)

如何在下次搜索时自动清除/重置页面？

2 个答案: