Question

我是JavaScript的新手。我制作了一个使用wunderground API的天气应用程序，它可以获取用户所在位置的当前天气。我希望允许用户在点击时在华氏温度和摄氏温度之间切换。该应用程序当前自动填充华氏度（如我所愿），并且只需单击一下即可切换到摄氏温度，但之后不会再对随后的点击进行切换。我希望在随后的点击之间在华氏温度和摄氏温度之间来回切换。理解为什么以及如何修复的任何帮助将不胜感激。谢谢。

这是我的JS：

$(document).ready(function() {
  if (navigator.geolocation) {

    // get user's location
    navigator.geolocation.getCurrentPosition(function(position) {

      // url for WU API
      var url = "https://api.wunderground.com/api/(API KEY)/conditions/q/" + position.coords.latitude + "," + position.coords.longitude + ".json";

      // get JSON of current weather
      $.getJSON(url, function(response) {

        // celsius
        var cel = response.current_observation.temp_c + " &#8451, "

        // city
        var city = response.current_observation.observation_location.city;

        // fahrenheit
        var far = response.current_observation.temp_f + " &#8457, ";

        // weather icon (e.g., rainy, cloudy)
        var icon = '<img src="' + response.current_observation.icon_url + '"/>';

        // weather text (e.g., "rainy", "cloudy")
        var weather = response.current_observation.weather;

        // populate each element with the JSON
        $(".city").html(city);
        $(".icon").html(icon);
        $(".temp").html(far);
        $(".weather").html(weather);

        // PROBLEM AREA: Only working once
        // on click, toggle between celsius and fahrenheit
        $("#units").on("click", function() {
          if (document.getElementById("units").innerHTML = "<a>&#8451</a>") {
            $(".temp").html(cel);
            $("#units").html("<a>&#8457</a>");
          }
          else {
            $(".temp").html(far);
            $("#units").html("<a>&#8451</a>");
          }
        });
      });
    });
  };
 });

这是我的HTML：

<div class="container-fluid">
  <div id="title">
    <div class="text-center">
    Current Weather In
    </div>
    <div>
      <span class="city"></span><br>
      <span class="icon"></span>
    </div>
  </div>
  <div>
    <span class="temp"></span>
    <span class="weather"></span>
  </div>
  <div id="units">
    <a>&#8451</a>
  </div>
</div>

编辑：这是一个jsfiddle：https://jsfiddle.net/WSox1235/w88tek6j/

Answer 1

我找到了你的问题。请参阅this fiddle。

我无法在没有API密钥的情况下使用您的API，因此，目前，我已将.on("click"事件部分放在navigator.geolocation之外，位于if (navigator.geolocation)之上。

我在这里发现了3个问题：

if (document.getElementById("units").innerHTML = "<a>&#8451</a>") {

您使用过赋值运算符＆＃34; =＆＃34;而不是比较运算符＆＃34; ==＆＃34;。所以使用＆＃34; ==＆＃34;而不是＆＃34; =＆＃34;。
document.getElementById("units").innerHTML为字符串添加空格，因此您必须删除空格，因此请使用trim()

的document.getElementById（＆＃34;单元＆＃34）。innerHTML.trim（）
document.getElementById("units").innerHTML.trim()没有为您提供编码值。它为您提供DOM的值，就像<a>℃</a>一样。所以你必须改变IF语句，如

document.getElementById("units").innerHTML.trim() == "<a>℃</a>

我在jsFiddle中注释了与API相关的代码。

希望这会对你有所帮助。

Answer 2

if (document.getElementById("units").innerHTML = "<a>&#8451</a>")

应该是

if (document.getElementById("units").innerHTML == "<a>&#8451</a>")

根据https://www.w3schools.com/js/js_comparisons.asp

Answer 3

只需将您的点击功能移到if，使变量全局变量在click函数

中使用

$(document).ready(function() {
var cel = '';
  $("#units").on("click", function() {
    console.log("a");
    if (document.getElementById("units").innerHTML = "<a>&#8451</a>") {
      $(".temp").html(cel);
      $("#units").html("<a>&#8457</a>");
    } else {
      //$(".temp").html(far);
      $("#units").html("<a>&#8451</a>");
    }
  });
//rest of the if code here, assign value to global variables inside if block.

DEMO：https://jsfiddle.net/5kfns0uj/1/

jquery点击功能只工作一次？

3 个答案: