使用bootstrap popover在其中显示结果

这是从开放天气API获取伦敦温度的代码。 它工作正常

            <!-- function foo(callback) { $.ajax({ url: "http://api.openweathermap.org/data/2.5/weather?q=London", dataType: 'JSON', success: callback }); } function myCallback(result) { var temp = JSON.stringify(JSON.parse(result.main.temp)); var Kelvin = 272; var Centigrade = Math.round(temp-Kelvin); if (Centigrade <= 25) { //alert("Temperature : "+Math.round(Centigrade)+" C"); var temp = document.getElementById("temp"); temp.style.fontSize = "20px"; temp.innerHTML = Centigrade+"° C , Cool   "+""; //document.getElementById("temp").innerHTML = Centigrade+"° C , Cool   "+""; } else if (Centigrade > 25) { var temp = document.getElementById("temp"); temp.style.fontSize = "20px"; temp.innerHTML = Centigrade+"° C , Cool   "+""; //document.getElementById("temp").innerHTML = Centigrade+"° C , It's Hot !!! "+""; } }  
  
 
   

现在我尝试使用bootstrap进行一些很好的可视化：

            $(function() { $("[data-toggle='popover']").popover(); });   Temperature  

这是不容错过的popover。 现在我想要的是我想要温度作为弹出元素。 即。 如果我点击图像按钮，它应该触发温度获取function，然后显示温度和与弹出框相关的图像。 所以这是我面临的两个挑战。

• 设置图像而不是红色按钮，然后设置温度数据

• 列出项目和图像即。 Tlogo2.svg将出现在该弹出框中。

所以有人可以建议如何设置吗？

为了更多说明，我要添加另一个代码。 这里的数据内容显示了函数名称。 但是我想要函数的结果：

            //Function function foo(callback) { $.ajax({ url: "http://api.openweathermap.org/data/2.5/weather?q=London", dataType: 'JSON', success: callback }); } function myCallback(result) { var temp = JSON.stringify(JSON.parse(result.main.temp)); var Kelvin = 272; var Centigrade = temp-Kelvin; alert("Temperature : "+Math.round(Centigrade)+" C"); //document.getElementById("temp").innerHTML = "Temperature : "+Math.round(Centigrade)+" C"; } $(function() { $("[data-toggle='popover']").popover(myCallback); });   Temperature  

请帮帮我。

Answer 1

使用Popover的选项来美化你的popover。 使用这些选项，您可以完全控制弹出窗口的function和外观。

http://getbootstrap.com/javascript/#popovers-usage

这个小提琴只展示了其中一些选项……

Js代码

 $(document).ready(function(){ $(".popover-examples a").popover({ title : 'Weather App', trigger: 'hover', template: '
Just an example of inserting image in a Popover...
' }); }); 

HTML

 
 
 Popover Example 
  

Answer 2

查看此演示 。

 function foo() { $.ajax({ url: "http://api.openweathermap.org/data/2.5/weather?q=London", dataType: 'JSON', success: function(result) { var temp = JSON.stringify(JSON.parse(result.main.temp)); var Kelvin = 272; var Centigrade = temp-Kelvin; var temperature = "Temperature : "+Math.round(Centigrade)+" C"; $('span.temp-val').text(temperature); } }); } $(document).ready(function(){ $(".popover-examples a").popover({ title : 'Weather App', trigger: 'hover', template: '
Just an example of inserting image in a Popover...
' }); $(".popover-examples a").hover(function() { foo(); }) }); 

您需要在hover触发元素时调用ajax函数。 此外，在模板中设置温度的标识符 – 这样您可以使用ajax调用将其设置为获得的值。