Wie kann ich zwischen Temperaturgradienteneinheiten wechseln?

-1

Ich bin in der Lage, die Fahrenheit-Temperatur anzuzeigen und einen Knopf zu schalten, um die celsius-Einheiten nur einmal korrekt anzuzeigen. Wenn ich erneut klicke, wird in Celsius der falsche Wert angezeigt und die Werte werden nicht mehr angezeigt.Wie kann ich zwischen Temperaturgradienteneinheiten wechseln?

Alle meine Funktionalität ist verschachtelt in einer getJSON Anfrage von Open Wetter API.

Hier ist mein HTML: `` `

<body> 
    <div class="main"> 
     <div class="description-wrapper"> 
      <div class="date-wrapper" id="date"> 
       <p></p> 
      </div> 
      <div class="location-wrapper" id="location"> 
       <p></p> 
      </div> 
      <div class="temperature-wrapper" id="temperature"> 
       <h3 class="weather-description"></h3> 
      </div> 
      <button class="toggleBtn" id="toggleDegrees">click to change between celsius and fahrenheit</button> 
      <div class="author-wrapper"> 
       <p>Penned by jginbound</p> 
       <p>Info provided by Open Weather API</p> 
      </div> 
     </div> 
    </div> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script type="text/javascript" src="scripts/main.js"></script> 
</body>

` `` meine JS-Code Hier ist ... Ich bin mehr über den Code-Schnipsel zu stellen, die unter den Kommentaren sind: hier „Toggle-Grad-Einheiten "

` ``

$.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' +  latitude + '&lon=' + longitude + '&APPID=xxxxxx', function(data){ 
       console.log(data); 

//get weather condition text 
       var weatherCondition = data.weather[0].description; 
       weatherDescription.html(weatherCondition); 
       // weatherDescription.html(data.weather[0]) 

       //return kelvin temperature 
       var kelvinTemp = data.main.temp; 
       //display temperature in fahrenheit 
       var degreeParagraph = '<p class="degreeUnit">'; 
       degreeParagraph += kelvinToFahrenheit(kelvinTemp); 
       degreeParagraph += '<span>'; 
       degreeParagraph += degreeSymbol; 
       degreeParagraph += '<a href="#" id="toggleDegreeUnit">'; 
       degreeParagraph += 'Fahrenheit'; 
       degreeParagraph += '</a>'; 
       degreeParagraph += '</span>'; 
       degreeParagraph += '</p>'; 
       weatherWrapper.append(degreeParagraph); 

       //toggle Degree Units here 

       $('#toggleDegrees').click(function(){ 
        console.log($('#toggleDegreeUnit').text()); 
        if($('#toggleDegreeUnit').text()==='Fahrenheit'){ 
         var displayFahrTemp = kelvinToFahrenheit(kelvinTemp); 
         displayFahrTemp = fahrToCel(displayFahrTemp); 
         console.log(displayFahrTemp); 
         $('.degreeUnit').html('<p>' + displayFahrTemp + '<span>' + degreeSymbol + '<a href="#" id="toggleDegreeUnit">' + ' Celsius' + '</a>' + '</span>' + '</p>'); 
        }else{ 
         var displayCelTemp = kelvinToFahrenheit(kelvinTemp); 
         displayCelTemp = celToFahr(displayCelTemp); 
         $('.degreeUnit').html('<p>' + displayCelTemp + '<span>' + degreeSymbol + '<a href="#" id="toggleDegreeUnit">' + ' Celsius' + '</a>' + '</span>' + '</p>'); 
        } 
       }); 
      });

`` `

freut sich über Ihr Feedback! auch Feedback zu Code-Struktur/Organisation/Effizienz wird ebenfalls geschätzt.

Quelle

2016-07-28 Johnny G.

Ich denke, dass Sie den Code ändern müssen.

1) Rufen Sie die Ajax-Funktion $ .getJSON (...) innerhalb von $ ('# toggleDegrees') auf click();

2) Warum können Sie das statische Tag "" nicht haben und den Text auf $ ('# toggleDegrees') dynamisch aktualisieren. Click() event.

3) Debugger verwenden; Im Script-Code von $ ('# toggleDegrees') click() script und verifiziere die Ausgabe der Ajax-Funktion und probiere sie aus.

Quelle

2016-07-28 23:18:43 Vijai

Dies ist mein Hauptproblem, so scheint es. Ich kann nicht weiter zwischen den beiden Grad-Einheiten wechseln. Es funktioniert einmal, stoppt dann aber nach zwei Klicks. http://codepen.io/johnnyginbound/pen/QEBbNw?editors=1010 –

Das Problem, das ich hier sehe, ist, dass die HTML-Zeichenfolge, die Sie konstruieren, in der if und der else Anweisung identisch ist.

$('.degreeUnit').html('<p>' + displayCelTemp + '<span>' + degreeSymbol + '<a href="#" id="toggleDegreeUnit">' + ' Celsius' + '</a>' + '</span>' + '</p>');

Da haben Sie Celsius wie der Text in #toggleDegreeUnit für beide Strings, wenn Sie Abfrage, die in Ihrer if Aussage, es immer wieder als Celsius kommt und somit jedes Mal, wenn der else Weg gehen nach der erste (seit du auf Fahrenheit voreingestellt bist). Wenn Sie die degreeUnit in der else Anweisung zu Fahrenheit ändern, wird der Code ordnungsgemäß hin und her auslösen.

Achten Sie auch darauf, den Platz vor Ihrem Gerät zu entfernen, sonst stimmt die if Anweisung nicht überein!

BEARBEITEN: Ich erstellte eine Fiddle für Sie, um eine andere Möglichkeit zu zeigen, Ihren Code effizienter zu organisieren, indem Sie den String-Erstellungsprozess in eine einzige Funktion abstrahieren.

Quelle

2016-07-29 03:01:19

danke, Lance! Ich werde es versuchen. und danke für die Geige :) –

Wie kann ich zwischen Temperaturgradienteneinheiten wechseln?

Antwort

Verwandte Themen