2016-11-03 3 views
0

Ich versuche, die Temperatur von Celsius nach Farenheit und umgekehrt zu ändern, aber wenn ich es versuche, funktioniert es nur einmal, wechselt von Celsius nach Farenheit und bleibt dort. Hier ist meine Seite: http://codepen.io/Juan1417/pen/zKZkxy.Anker mit Onclick-Ereignis funktioniert nur einmal

und der Code:

$(document).ready(function(){ 

var temp; 
var long; 
var lat; 

if(navigator.geolocation){ 

    navigator.geolocation.getCurrentPosition(function(position){ 

    lat=position.coords.latitude; 
    long=position.coords.longitude; 

    var api="http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&appid=c873adc18574701f4fb0abe01d927819"; 


    $.getJSON(api,function(data){ 

     var city =data.name; 
     var country=data.sys.country; 
     var weather=data.weather[0].main; 
     temp=data.main.temp; 

     addIcon(weather); 

     document.getElementById('location').innerHTML =city+", "+country; 
     document.getElementById('temperature').innerHTML =(temp-273.13)+"<a id='anc' href='#'> Cº</a>"; 

     $("#anc").click(function(e){ 

      if(document.getElementById('anc').innerHTML==" Cº") document.getElementById('temperature').innerHTML =(temp*1.8+32)+"<a id='anc' href='#'> Fº</a>"; 

      else document.getElementById('temperature').innerHTML =(temp-32/1.8)+"<a id='anc' href='#'> Fº</a>"; 

      }); 
     }); 
    }); 


} 

     function addIcon(weather) { 

      switch(weather){ 

      case 'Dizzle': 

       document.getElementById('animation').innerHTML ="<div class='icon sun-shower'><div class='cloud'></div><div class='sun'><div class='rays'></div></div><div class='rain'></div></div>"; 
        break; 

       case 'Rain': 
        document.getElementById('animation').innerHTML ="<div class='icon rainy'><div class='cloud'></div><div class='rain'></div></div>"; 
        break; 
       case 'Snow': 
        document.getElementById('animation').innerHTML ="<div class='icon flurries'><div class='cloud'></div><div class='snow'><div class='flake'></div><div class='flake'></div></div>>/div>"; 
        break; 
       case 'Clear': 
        document.getElementById('animation').innerHTML ="<div class='icon sunny'><div class='sun'><div class='rays'></div></div></div>"; 
        break; 
       case 'Thunderstom': 
        document.getElementById('animation').innerHTML ="<div class='icon thunder-storm'><div class='cloud'></div><div class='lightning'><div class='bolt'></div><div class='bolt'></div></div></div>"; 
        break; 
       default: 

     } 

     } 
}); 

Antwort

0

Sie die <a> neu zu erstellen, dass die Veranstaltung angebracht ist. Sie müssen das Element nicht bei jedem Klick überschreiben oder statt auf einen Klick auf das Element zu warten, auf das Dokument achten und sehen, ob es zufällig auf diesem Element landet.

$("#anc").click(function(e){ 

mit

$(document).on("click", "#anc", function(){ 

siehe ersetzen: jQuery's .on()

Auch Ihre if/else beide zeigen Fereheit wurden.

Here is the corrected fiddle