如何多次显示 span id 数据？
[英]How can I display span id data multiple times?
问题描述
I need a really simple solution to the following problem.
我需要一个非常简单的解决方案来解决以下问题。 I can get the JSON data and parse it just fine.我可以得到 JSON 数据并很好地解析它。 To write it to the screen I'm using span id because it was in my example.要将其写入屏幕，我使用的是 span id，因为它在我的示例中。 Obviously when I try to use it a second time on the page it's now null .显然，当我尝试在页面上第二次使用它时，它现在是null 。 I'm not trying to instantiate a value, I'm trying to just call the data.我不是想实例化一个值，我只是想调用数据。 I've tried using it as a class but nothing shows up.我尝试将它用作 class 但没有任何显示。 How can I simply modify this so I can pull the data multiple times on a page?我怎样才能简单地修改它，以便我可以在页面上多次提取数据？ For instance, I'm trying to display the state information multiple times on the page but it only shows once.例如，我试图在页面上多次显示 state 信息，但它只显示一次。 Can you help?你能帮我吗？
<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 个解决方案
解决方案1
2 已采纳 2020-07-21 14:58:29
The easiest solution is to change from id to class since only one element can have the same ID on the same page.最简单的解决方案是从id更改为class ，因为在同一页面上只有一个元素可以具有相同的 ID。 Then change the jQuery selector from $('#state') to $('.state') since we are using classes now.然后将 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.