Question

我已经进行了几个月的自学，并将this放在一起，在我使用的其中一个平台上进行在线挑战。我已经设法在点击时使用Jquery更改元素的内部HTML，但无法弄清楚如何将其更改回再次单击时的内容。

我怎样才能使第一次点击.button改变HTML的方式，声音点击将其更改回来，可以重复交互而无需重新加载页面？

// curent temp, day high and day low
  var temp = json.main.temp.toFixed(1);
  var tempLo = json.main.temp_min.toFixed(1);
  var tempHi = json.main.temp_max.toFixed(1);
  //temperatures converted to farenheit
  var tempF = (temp * (9 / 5) + 32).toFixed(1);
  var tempLoF = (tempLo * (9 / 5) + 32).toFixed(1);
  var tempHiF = (tempHi * (9 / 5) + 32).toFixed(1);
  //default temperature display in celcius on document ready
  $(".temp").html(temp + "&deg;C");
  $(".temp-low").html(tempLo + "&deg;C");
  $(".temp-high").html(tempHi + "&deg;C");

  $(".button").click(function(){
    $(".temp").html(tempF+ "&deg;F");
    $(".temp-low").html(tempLoF+ "&deg;F");
    $(".temp-high").html(tempHiF+ "&deg;F");
  });

有关更多背景信息，请参阅上面的链接。

Answer 1

你可以记住旧的值（当我理解你的代码时，没有必要这样做，因为两个值都已存储在tempX变量中）并使用触发器来检查当前显示的值：

var celsius = false;
$(".button").click(function(){
  if(celsius) {
    $(".temp").html(tempF+ "&deg;F");
    $(".temp-low").html(tempLoF+ "&deg;F");
    $(".temp-high").html(tempHiF+ "&deg;F");
  } else {
    $(".temp").html(temp+ "&deg;C");
    $(".temp-low").html(tempLo+ "&deg;C");
    $(".temp-high").html(tempHi+ "&deg;C");
  }
  celsius = !celsius;
});

Answer 2

您可以使用按钮属性/数据来存储当前指标，并通过初始设置更改/切换每次点击

function setTime() {
  var colon = ":";
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();
  //Display seconds & minutes with two digits if < 10
  if (seconds < 10) {
    seconds = "0" + seconds;
  }
  if (minutes < 10) {
    minutes = "0" + minutes;
  }
  // display current time in innerHTML of #time
  var timeNow = `${hours}${colon}${minutes}${colon}${seconds}`;
  document.getElementById("time").innerHTML = timeNow;
}
//update setTime every 1000ms
setInterval(setTime, 1000), setTime();

// diplay .title and .sub at the top of the page
document.getElementById("title").innerHTML = "FCC";
document.getElementById("sub").innerHTML = "Weather App";

$(document).ready(function() {
  //Get Locatiion and declare in var lat and long
  navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    var long = position.coords.longitude;
    //add lat and long to URL with template literals
    var weatherApiURL = `https://fcc-weather-api.glitch.me/api/current?lat=${lat}&lon=${long}`;
    // Get wheather object
    $.getJSON(weatherApiURL, function(json) {
      //disolay location on page
      document.getElementById("location").innerHTML = json.name;
      //display weather icon
      var iconURL = json.weather[0].icon;
      document.getElementById("icon").src = iconURL;
      // display weather condition description (i.e. cloudy, sunny etc.)
      document.getElementById("condition").innerHTML =
        json.weather[0].description;
      // display curent temp, day high and day low
      var temp = {
        'C' : json.main.temp.toFixed(1),
        'F' : (json.main.temp.toFixed(1) * (9 / 5) + 32).toFixed(2)
      };
      var tempLo = {
        'C' : json.main.temp_min.toFixed(1),
        'F' : (json.main.temp_min.toFixed(1) * (9 / 5) + 32).toFixed(1)
      };
      var tempHi = {
        'C' : json.main.temp_max.toFixed(1),
        'F' : (json.main.temp_max.toFixed(1) * (9 / 5) + 32).toFixed(1)
      };

      // initial setup
      var old = $('.button').attr('data-metric');
      switch(old) {
        case 'F':
          metric = 'F';
          break;
        case 'C':
          metric = 'C';
          break;
        default:
          metric = 'C';
          break;
      }

      //default temperature display in celcius on document ready
      $(".temp").html(temp[metric] + "°" + metric);
      $(".temp-low").html(tempLo[metric] + "°" + metric);
      $(".temp-high").html(tempHi[metric] + "°" + metric);

      $(".button").click(function() {
        switch($(this).attr('data-metric')) {
          case 'C':
            metric = 'F';
            break;
          case 'F':
          default:
            metric = 'C';
            break;
        }
        $('.button').attr('data-metric', metric);
        $(".temp").html(temp[metric] + "°" + metric);
        $(".temp-low").html(tempLo[metric] + "°" + metric);
        $(".temp-high").html(tempHi[metric] + "°" + metric);
      });
    });
  });
});

并遵循html代码。请注意data-metric="C"，这是存储当前指标的属性

<div class="container">
  <div class="clock">
    <h1 id="title"></h1>
  <h2 id="sub"></h2>
    <h1 id="time"></h1>
    <h3 id="location"></h3>
    <img src="" alt="" id="icon">
    <h3 id="condition"></h3>
    <div class="temp-box">
      <h3 class="temp"></h3>
      <div class="hilo">
        <div class="temp-hilo">
          <h5 class="temp-low"></h5><i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>
        </div>
        <div class="temp-hilo">
          <h5 class="temp-high"></h5><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i>
        </div>
      </div>
    </div>
    <button data-metric="C" class="button">&deg;C&nbsp;/&nbsp;&deg;F</button>
  </div>
</div>

https://codepen.io/anon/pen/bYGpzz

单击时更改内部html，然后使用Jquery或JS更改回来

2 个答案: