如何多次显示 span id 数据？
我需要一个非常简单的解决方案来解决以下问题。我可以获得 JSON 数据并解析它就好了。为了将它写入屏幕，我使用了 span id 因为它在我的示例中。显然，当我尝试在页面上第二次使用它时，它现在是null。我不是要实例化一个值，我只是想调用数据。我试过用它作为一个类，但没有出现。我怎样才能简单地修改它以便我可以在页面上多次提取数据？例如，我试图在页面上多次显示状态信息，但它只显示一次。你能帮我吗？
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Geo City Locator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<body>
<div>State: <span id="state"></span></div>
<div>State: <span id="state"></span></div>
<div>State: <span id="state"></span></div>
<div>State: <span id="state"></span></div>
<div>City: <span id="city"></span></div>
<div>Latitude: <span id="latitude"></span></div>
<div>Longitude: <span id="longitude"></span></div>
<div>IP: <span id="ip"></span></div>
<script>
$.getJSON('https://geolocation-db.com/json/')
.done (function(location) {
$('#country').html(location.country_name);
$('#state').html(location.state);
$('#city').html(location.city);
$('#postal').html(location.postal);
$('#latitude').html(location.latitude);
$('#longitude').html(location.longitude);
$('#ip').html(location.IPv4);
});
</script>
</body>
</html>
青春有我1回答
-
白衣非少年
最简单的解决方案是将 from 更改为id，class因为同一页面上只有一个元素可以具有相同的 ID。然后将 jQuery 选择器从 更改$('#state')为$('.state')因为我们现在正在使用类。<head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Geo City Locator</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <body> <div>State: <span class="state"></span></div> <div>State: <span class="state"></span></div> <div>State: <span class="state"></span></div> <div>State: <span class="state"></span></div> <div>City: <span id="city"></span></div> <div>Latitude: <span id="latitude"></span></div> <div>Longitude: <span id="longitude"></span></div> <div>IP: <span id="ip"></span></div> <script> $.getJSON('https://geolocation-db.com/json/') .done (function(location) { $('#country').html(location.country_name); $('.state').html(location.state); $('#city').html(location.city); $('#postal').html(location.postal); $('#latitude').html(location.latitude); $('#longitude').html(location.longitude); $('#ip').html(location.IPv4); }); </script> </body> </html>
随时随地看视频慕课网APP
相关分类
JavaScript