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

话虽如此!

确实没有理由设置 coords基于 HTML 元素值的变量。即使您必须显示它们，您最好直接从 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