访问和更改数据值

Question

我正在处理的小天气预报应用程序。我一直在试图将温度从摄氏温度变为华氏温度，但是我所做的所有更改都不会改变数值或完全消除该线。我想学习使用数据属性，如果有可能

$(document).ready(function(){ 

    var long; 
    var lat; 

     $.getJSON("https://crossorigin.me/http://ip-api.com/json", function(data2){ //access RESTFUL geo location API & set lattitude.longitude 
      lat=data2.lat; 
      long=data2.lon; 

    var api = "https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&appid=de61ccfbde0405f57d64dbb53323fccf&units=metric"; 
    //Access weather API 

     $.getJSON(api, function(data){ 

      var iconCode = data.weather[0].icon; //get Icon from API related to current weather conditions 
      var iconUrl = "http://openweathermap.org/img/w/"+iconCode+".png"; 
      var tempCel = data.main.temp; 
      $(".heading").append("<h2>"+data.name+","+data.sys.country+"</h2>"); 
      $(".message").append("<h4 id='tempData' data-temp='" + tempCel + "'>Current Temperature: "+tempCel+"&#8451</h4>"); 
      $(".message").append("<h4>Conditions: "+data.weather[0].main+"</h4>"); 
       // $("#reveal").on('click', function(){ //click button 
       // data.main.tempData //on click convert temperature to farenheight 
       // }); 
      $(".message").append("<img id='conditions' src="+iconUrl+">"); 

      $("#tempData").hover(function(){ 
       $("#tempData").fadeToggle('slow', function(){ 

       }); 
      }); 
      console.log(data); 
     });  
     }); 
    //$("#reveal").on("click", function(){ 
    //}); 
}); 

Answer 1

请看看下面的代码。希望这可以帮助你：

$.getJSON(api, function(data){ 

    var iconCode = data.weather[0].icon; //get Icon from API related to current weather conditions 
    var iconUrl = "http://openweathermap.org/img/w/"+iconCode+".png"; 
    var tempCel = data.main.temp; 
    var tempFar = Math.round(parseFloat(tempCel) * 9/5 + 32); //calculating the temp in Fahrenheit 

    $(".heading").append("<h2>"+data.name+","+data.sys.country+"</h2>"); 

    //setting the both temp in Cel and Far as a data attr which can be used in hover event listener 
    $(".message").append("<h4 id='tempData' data-temp-cel='" + tempCel + "' data-temp-far='" + tempFar + "'>Current Temperature: "+tempCel+"&#8451</h4>"); 
    $(".message").append("<h4>Conditions: "+data.weather[0].main+"</h4>"); 

    $(".message").append("<img id='conditions' src="+iconUrl+">"); 

});   

//attaching the hover effect 
$(document).on({ 
    mouseenter: function() { 
     var tempInFar = $(this).data('temp-far'); 
     $(this).html("Current Temperature: "+tempInFar+"&#8457;"); //setting the inner html to show temp in Fahrenheit 
    }, 
    mouseleave: function() { 
     var tempInCel = $(this).data('temp-cel'); 
     $(this).html("Current Temperature: "+tempInCel+"&#8451;"); //setting the inner html to show temp in Celsius 
    } 
}, "#tempData"); 

Answer 2

尝试在悬停上追加div来显示数据。

$("#tempData").hover(function(){ 
     var tempIn = (tempCel * 1.8) + 32; 
     $('<div />', { 
       'class' : 'tip', 
       text : "Temp in Farenheit: " + tempIn + " F", 
       css : { 
        position: 'fixed' 
       } 
      }).appendTo(this); 
     },function(){ 
      $('.tip', this).remove(); 
     }); 

Fiddle

Answer 3

您可以使用<span>元素的<h4>孩子北部沿海地区显示文本。将@charset设置为"UTF-8"，在css;在:hover,:after,#tempData元件组content到attr()以data-temp作为参数;设置span至display:none，地址为#tempData:hover。

$(document).ready(function() { 

    var long; 
    var lat; 

    $.getJSON("/path/to/resource", function(data2) { //access RESTFUL geo location API & set lattitude.longitude 
    lat = data2.lat; 
    long = data2.lon; 

    var api = "/path/to/resource/1?lat=" + lat + "&lon=" + long + "&appid=de61ccfbde0405f57d64dbb53323fccf&units=metric"; 
    //Access weather API 

    $.getJSON(api, function(data) { 

     var c = data.main.temp; 
     var f = Math.floor(c * 1.8 + 32); 
     var h4 = $("<h4></h4>", { 
      id: "tempData", 
      html: "Current Temperature: <span>" + c + "&#8451;</span></h4>", 
      "data-temp": f 
     }) 
     .appendTo("body"); 
    }); 
    }); 
}); 

@charset "UTF-8"; 
#tempData:hover:after { 
    content: attr(data-temp) "\2109"; 
} 
#tempData:hover span { 
    display: none; 
}