toggleClassをクリックして$（ 'p'）タグのFahrenheitとCelsiusを切り替えるにはどうすればいいですか？

Question

toggleClass（）は$（ 'p'）で動作しないので、華氏と摂氏と華氏に戻って、何度もユーザーが望むように？コードへ

リンク：

//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タグにクラスを追加します。http://codepen.io/duel_drawer8/pen/bpoozL

私の完全なコードあなたは、リンクを見ることができない場合次にクリックします。

次に、クリックごとにクラスを切り替えます。

グローバル変数として温度があるので、それを関数に渡す必要はありません。

華氏温度を追加するか、摂氏温度を計算するための異なる機能を作成します。

$('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タグにデータ属性を追加するオブジェクト
• に格納しますどの値を次に表示するか決定する
• クリック - データ属性に基づいて表示する値を決定し、データ属性を切り替えますUTE

Here is another codepen-fork