单击时如何使用 toggleClass 在我的 $('p') 标签上切换华氏度和摄氏度

Question

为什么 toggleClass() 不能在 $('p') 上工作，该 $('p') 可以根据用户的需要在华氏度和摄氏度之间切换并返回华氏度等次数？

Link 代码：http://codepen.io/duel_drawer8/pen/bpoozL

如果你看不到我的完整代码link:

//Our ID key for weather app
var appID = "&APPID=f74316dbe7442f12d602b1cae1a5172b";

var city;
var state;
var fahrenheit = "&units=imperial";
var temp;

//using a geo-location API to get city and state info of current user
$.getJSON('http://ip-api.com/json/?callback=?', function(data) {
  city = data.city;
  state = data.regionName;
  getWeather(city, state);
});

//using weather API and outputting results into our HTML
function getWeather(city, state) {
  var api = "http://api.openweathermap.org/data/2.5/weather?q=" + city + "," + state + "" + fahrenheit + "" + appID;

$.ajax({
url: api,
dataType: 'json',
success: function(data) {
  temp = data.main.temp;
  $('h3').text(city + "," + state);
  $('p').html(temp + '&deg F');
 
  }
 });
}

$('p').on('click', function(){
    $('p').text(changeTemp(temp));
    $('p').toggleClass(changeTemp(temp));
});

function changeTemp(temp){
   var cel = (temp - 32) * 5/9;
   return cel;
};

Answer 1

在 p 标签中添加 class 以决定您是否应该在下次点击时插入摄氏度或华氏度。

然后在每次点击时切换 class。

由于您将温度作为全局变量，因此无需将其传递给函数。

创建不同的函数来添加华氏温度或计算摄氏温度。

$('p').on('click', function(){
  $('p').toggleClass('celcius');
  $('p').toggleClass('fahrenheit');

  if ($(this).hasClass('celcius')) {
    $('p').text(setFahrenheit());
    return;
  }

  $('p').text(setCelcius());
});

function setCelcius(){
  var cel = (temp - 32) * 5/9;
  return cel + "° C";
};

function setFahrenheit(){
  return temp + "° F";
};

Here is my codepen-fork

或另一种方法 - 也许更清洁的方法：

计算 ajax 成功中的两个温度并将其存储在对象中
向 p 标签添加数据属性以决定接下来显示哪个值
点击时 - 根据数据属性决定显示哪个值并切换数据属性

Here is another codepen-fork

单击时如何使用 toggleClass 在我的 $('p') 标签上切换华氏度和摄氏度

How can I use toggleClass to switch between Fahrenheit and Celsius on my $('p') tag when clicked

javascript

jquery

jquery-events