Question

我试图将温度从摄氏温度改为farenheit而反之亦然，但是当我尝试它只工作一次，从摄氏温度变为华氏温度并保持在那里。这是我的页面：http://codepen.io/Juan1417/pen/zKZkxy。

和代码：

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

         }

      }
});

Answer 1

您正在重新创建事件附加到的<a>。您需要在每次点击时都不覆盖该元素，或者不是在元素上单击，而是在文档上监听它，看看它是否恰好落在该元素上。

替换

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

与

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

请参阅：jQuery's .on()

另外，你的if / else都显示了Fereheit。

Here is the corrected fiddle

使用onclick事件的锚只能运行一次

1 个答案: