javascript将id值变为变量

Question

我使用了api来获取有关访问我网页的人的一些信息。数据返回到JSON格式，我使用.html函数将内容设置为某些ID，如下所示：

$.getJSON("http://ip-api.com/json/?callback=?", function (data) {
    $("#lat").html(data.lat);
    $("#lon").html(data.lon);
});

使用：

<p id="lat"></p> 
<p id="lon"></p>

在我的html主体中，我可以看到数据已经设置并在我的浏览器中打印。

我的问题是如何将从ID打印的数据检索到另一个单独的变量中以继续使用/传递给其他函数？我尝试过使用getElementById()等不同的功能，但都没有。

Answer 1

您可以使用$(element).html() 获取元素的内容。

例如：

var someHtml = "<p>Hello world!</p>";

$(someElement).html(someHtml); 
// This will set the html to be "<p>Hello world!</p>"

alert( $(someElement).html() );
// This will return "<p>Hello world!</p>" in the alert box!

直接回答你的问题：

var coords = {
    // lat coord
    'lat' : $("#lat").html(),

    // long coord
    'lon' :$("#lon").html()
};

然后，您可以使用coords.lat和coords.lon

来引用它们

这就是说！

没有理由根据HTML元素的值设置coords变量。即使您必须显示它们，最好还是直接从API响应中保存变量，以减少几毫秒的时间。

所以你可以这样做：

var coords = {};
$.getJSON("http://ip-api.com/json/?callback=?", function (data) {
    $("#lat").html(data.lat);
    $("#lon").html(data.lon);
    coords = { 'lat' : data.lat, 'lon' : data.lon };
});

编辑：

根据您的pastebin example - 您的错误来自两个地方：

1。您试图在呈现之前影响#map div

首先，将您的所有脚本移到 HTML下方，这样<div id="map"></div>旁边就会有<table id="GeoResults"></table>

第22-27行成为：

<table id="GeoResults"></table>

<p id="lat"></p>
<p id="lon"></p>

<div id="map"></div>

2。在设置之前，您是引用latitude。

在第61和62行，您可以尝试console.log()和document.write()查看变量latitude。它直到紧接着之后才定义：

        console.log(latitude);
        document.write(latitude);

        var coords = {
            // lat coord
            'lat' : $("#lat").html(),

            // long coord
            'lon' :$("#lon").html()
        };

所以显然不起作用 - 只需移动这些行，直到你定义latitude并且你是黄金。

Try out the updated HTML