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;
}

访问和更改数据值

3 个答案: