2016-11-03 9 views
0

温度を摂氏から華氏に変更しようとしていますが、それを一度だけ試してみると摂氏から華氏に変わり、そこにとどまります。私のページはhttp://codepen.io/Juan1417/pen/zKZkxyです。onclickイベントのアンカーは一度しか動作しません

やコード:

$(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: 

     } 

     } 
}); 

答えて

0

あなたは<a>を再作成しているイベントが接続されています。クリックごとに要素を上書きしたり、要素のクリックをリッスンしたり、文書上でそれを聞いたり、その要素に着地したかどうかを確認する必要があります。

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

を参照して

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

を置き換える:あなたの場合/他のFereheitを示す両方だった、またjQuery's .on()

Here is the corrected fiddle

関連する問題