我粘贴下面的html代码,它按国家/地区加载天气状况,例如,如果用户选择纽约,则气象将在div“明天”上显示,但如果用户再次更改国家/地区,div将不会重新加载新的预设。我尝试了一些脚本,但我没有 js 技能,有人可以帮助我吗?
谢谢
完整的 html 项目下方
更改选择的国家/地区后,我需要重新加载div。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>Weather</title>
<style>
select {
font-size: 17px;
margin-top: 10px;
border-radius: 25px;
padding: 10px;
border: 0.5px solid #dedede;
width: 100%;
}
select {
background-image:
linear-gradient(45deg, transparent 50%, gray 50%),
linear-gradient(135deg, gray 50%, transparent 50%),
linear-gradient(to right, #ccc, #ccc);
background-position:
calc(100% - 20px) calc(1em + 2px),
calc(100% - 15px) calc(1em + 2px),
calc(100% - 2.5em) 0.5em;
background-size:
5px 5px,
5px 5px,
1px 1.5em;
background-repeat: no-repeat;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
</style>
</head>
<body bgcolor="#f9f9f9">
<script>
function changeSim() {
const select = document.getElementById('select');
$("#tomorrow").attr(
"data-location-id",
select.options[select.selectedIndex].value);
load(document, 'script', 'tomorrow-sdk');
}
function load(d, s, id) {
if (d.getElementById(id)) {
if (window.__TOMORROW__) {
window.__TOMORROW__.renderWidget();
}
return;
}
const fjs = d.getElementsByTagName(s)[0];
const js = d.createElement(s);
js.id = id;
js.src = "https://www.tomorrow.io/v1/widget/sdk/sdk.bundle.min.js";
fjs.parentNode.insertBefore(js, fjs);
};
</script>
<select id="select" onchange="changeSim()">
<option value="">--Choose an option--</option>
<option value="000011">Abu Dhabi</option>
<option value="003919">Adelaide - Australia</option>
<option value="038587">Addis Abeba - Ethiopia</option>
<option value="031230">Algeri - Algeria</option>
<option value="077340">Amsterdam - Netherlands</option>
<option value="107166">Ankara - Turkey</option>
<option value="107169">Antalia - Turkey</option>
<option value="052515">Athens - Greece</option>
<option value="080561">Arequipa - Peru</option>
<option value="111590">Atlanta - Georgia</option>
<option value="111591">Atlanta - Texas</option>
<option value="111592">Atlanta - Illinois</option>
<option value="134504">Baghdad - Iraq</option>
<option value="080561">Bali - Indonesia</option>
<option value="106448">Bankcog - Thailand</option>
<option value="032653">Barcelona - Spain</option>
<option value="111806">Bar Harbor - Maine - USA</option>
<option value="019332">Beijin - China</option>
<option value="065936">Beirut - Lebanon</option>
<option value="097170">Belgrade - Serbia</option>
<option value="024053">Berlin - Germany</option>
<option value="017462">Bern - Switzerland</option>
<option value="112589">Boston - Massachusset - USA</option>
<option value="104374">Bratislava - Slovakia</option>
<option value="004411">Brisbane - Australia</option>
<option value="090347">Bucharest - Romania</option>
<option value="055263">Budapest - Hungary</option>
<option value="000704">Buenos Aires - Argentina</option>
<option value="008693">Bruselles - Belgium</option>
<option value="031802">Cairo - Egypt</option>
<option value="016259">Calgary - Canada</option>
<option value="004566">Canberra - Australia</option>
<option value="131059">Cape Town - South Africa</option>
<option value="021114">Cartagena de Indias - Colombia</option>
<option value="113931">Chicago - Illinois - USA</option>
<option value="143883">Colombia - Colombia</option>
<option value="030620">Copenhagen - Denmark</option>
<option value="080636">Cusco - Peru</option>
<option value="104704">Dakar - Senegal</option>
<option value="104988">Damascus - Syria</option>
<option value="004947">Darwin - australia</option>
<option value="115253">Denver - Colorado - USA</option>
<option value="030565">Djibouti - Djibouti</option>
<option value="000032">Dubai - United Arab Emirates</option>
<option value="057223">Dublin - Ireland</option>
<option value="131092">Durban - South Africa</option>
<option value="138563">Florence - Italy</option>
<option value="049441">Edinburgh - Germany</option>
<option value="025211">Frankfurt - Germany</option>
<option value="2180733">Fuerteventura - Canary Islands - Spain</option>
<option value="130201">Hanoi - Vietnam</option>
<option value="038770">Helsinki - Finland</option>
<option value="130563">Hội An - Vietnam</option>
<option value="118623">Honolulu - Hawaii - USA</option>
<option value="034729">Ibiza - Spain</option>
<option value="118924">Indianapolis - Indiana - USA</option>
<option value="085475">Islamabad - Pakistan</option>
<option value="107308">Istanbul - Turkey</option>
<option value="056293">Jakarta - Indonesia</option>
<option value="057484">Jerusalem - Israel</option>
<option value="131136">Joahnnesburg - South Africa</option>
<option value="000079">Kabul -Afghanistan</option>
<option value="079735">Kathmandu - Nepal</option>
<option value="109897">Kyiv - Ukraine</option>
<option value="076497">Kuala Lumpur - Malaysia</option>
<option value="2180737">Lanzarote - Canary Islands - Spain</option>
<option value="034988">Las Palmas - Canary Islands - Spain</option>
<option value="089245">Lisbon - Portugal</option>
<option value="120626">Little Rock - Arkansas - USA</option>
<option value="120163">Las Vegas - Nevada - USA</option>
<option value="050388">London - UK</option>
<option value="120784">Los Angeles - California - USA</option>
<option value="104169">Ljubljana - Slovenia</option>
<option value="066801">Luxembourg - Luxembourg</option>
<option value="035186">Madrid - Spain</option>
<option value="035703">Malaga - Spain</option>
<option value="083524">Manila - Philippines</option>
<option value="102864">Mecca - Saudi Arabia</option>
<option value="021074">Medellin - Colombia</option>
<option value="006235">Melbourne - Australia</option>
<option value="140142">Milan - Italy</option>
<option value="121951">Minneapolis - Minnesota - USA</option>
<option value="015989">Minsk - Belarus</option>
<option value="104810">Mogadishu - Somalia</option>
<option value="044298">Montpelier - France</option>
<option value="099972">Moskow - Russia</option>
<option value="133024">Mumbai - India</option>
<option value="027540">Munich - Germany</option>
<option value="064845">Nairobi - Kenya</option>
<option value="140713">Naples - Italy</option>
<option value="022069">Nicosia - Cyprus</option>
<option value="122795">New York City - New York - USA</option>
<option value="133210">New Delhi - India</option>
<option value="123404">Oklahoma City - USA</option>
<option value="064214">Osaka - Japan</option>
<option value="079425">Oslo - Norway</option>
<option value="2180760">Palma de Mallorca - Spain</option>
<option value="044856">Paris - France</option>
<option value="106617">Pattaya - Thailand</option>
<option value="067364">Podgorica - Montenegro</option>
<option value="006840">Perth - Australia</option>
<option value="022970">Prague - Czech Republic</option>
<option value="2011883">Pristina - Kosovo</option>
<option value="106650">Phuket - Thailand</option>
<option value="065231">Pyongyang - North Korea</option>
<option value="016867">Quebec - Canada</option>
<option value="067193">Rabat - Morocco</option>
<option value="135206">Reykjavik - Iceland</option>
<option value="066948">Riga - Latvia</option>
<option value="059385">Rimini - Italy</option>
<option value="014309">Rio De Janeiro - Brazil</option>
<option value="059582">Roma</option>
<option value="125577">Sacramento - California - USA</option>
<option value="125767">Salt Lake City - Utah - USA</option>
<option value="104700">San Marino - San Marino</option>
<option value="125809">San Francisco - California - USA</option>
<option value="125894">Sanibel - Florida - USA</option>
<option value="001458">Santa Fe - Argentina</option>
<option value="2090771">Santorini - Greece</option>
<option value="015101">São Paulo - Brazil</option>
<option value="037036">Santa Cruz de Tenerife - Canary Island
<option value="014404">Salvador - Brazil</option>
<option value="008380">Sarajevo - Bosnia and Herzegovina</option>
<option value="126104">Seattle - Whashington - USA</option>
<option value="065498">Seoul - South Korea</option>
<option value="104057">Singapore - Singapore</option>
<option value="067526">Skopje - Macedonia</option>
<option value="009701">Sofia - Bulgaria</option>
<option value="126572">Solvang - California - USA</option>
<option value="103758">Stockholm - Sweden</option>
<option value="007408">Sydney - Australia</option>
<option value="109031">Taipei - Taiwan</option>
<option value="031716">Tallinn - Estonia</option>
<option value="052126">Tbilisi</option>
<option value="135129">Teheran - Iran</option>
<option value="000271">Tirana - Albania</option>
<option value="064500">Tokyo - Japan</option>
<option value="067032">Tripoli - Lybia</option>
<option value="107039">Tunisi - Tunisia</option>
<option value="061575">Turin - Italy</option>
<option value="067815">Valletta - Malta</option>
<option value="061822">Venice - Italy</option>
<option value="017156">Victoria - Canada</option>
<option value="003681">Vienna - Austria</option>
<option value="066703">Vilnius - Lithuania</option>
<option value="088480">Warasw - Poland</option>
<option value="079915">Wellington - New Zealand</option>
<option value="055004">Zagreb - Croatia</option>
</select>
<div style="height:15px;"></div>
<div id="tomorrow" class="tomorrow"
data-location-id='$("#country_text").text(id)'
data-language="EN"
data-unit-system="METRIC"
data-skin="light"
data-widget-type="upcoming"
style="padding-bottom:22px;position:relative;"
>
<a
href="https://www.tomorrow.io/weather-api/"
rel="nofollow noopener noreferrer"
target="_blank"
style="position: absolute; bottom: 0; transform: translateX(-50%); left: 50%;"
>
<img
alt="Powered by the Tomorrow.io Weather API"
src="https://weather-website-client.tomorrow.io/img/powered-by.svg"
width="250"
height="18"
/>
</a>
</div>
</body>
</html>
在小部件渲染后检查 DOM,显示
#tomorrow
元素已添加 data-rendered="true"
- 以防止脚本再次解析已渲染小部件的元素。
所以你不仅需要设置新的位置ID,还需要删除该属性,或者将其设置为false。
function changeSim() {
const select = document.getElementById('select');
$("#tomorrow").attr(
"data-location-id",
select.options[select.selectedIndex].value);
$("#tomorrow").attr('data-rendered', 'false'); // <- set rendered state to false
load(document, 'script', 'tomorrow-sdk');
}