所以我創建了這個網站，讓用戶可以搜索不同城市的天氣。這些搜索然后通過本地存盤保存在一個看起來像這樣的物件中。
為了在網站上顯示這一點，我嘗試進行以下操作
<div class="jumbotron bg-white">
<div class="container">
<h1>Latest requests</h1>
<h5 id="get-weather">We remember your five last requests for you :)</h5>
<div class="last-requests">
<img src="" class="imgs">
<p class="cityname" class="mr-3"></p>
<p class="cityweather"></p>
<p class="citytemp"></p>
<p class="citywind"></p>
</div>
</div>
</div>
以及下面的 JS
// Displays last 5 requests/searches
function displayLastRequests() {
const lastReq = JSON.parse(localStorage.getItem('last-requests'))
console.log(lastReq)
if (displayLastRequests > 0) {
// for loop request
for (req in lastReq) {
$(".imgs").attr('src', req.imgurl);
$(".cityname").text(req.city_name);
$(".cityweather").text(req.city_weather);
$(".citytemp").text(req.city_temp " °C");
$(".citywind").text(req.city_wind " m/s");
}
}
};
displayLastRequests()
不太確定我在哪里做錯了，任何幫助將不勝感激。
uj5u.com熱心網友回復：
您現有的代碼將僅顯示最后一次搜索，因為只有一個“城市名稱”可以輸出。
您可以使用 HTML5<template>來提供一個 ...well... 模板，您可以根據需要復制和添加該模板。
您的for回圈可能還需要是for (.. of ..)而不是.. in ..哪個會給出索引而不是條目。
更新代碼：
function displayLastRequests() {
//const lastReq = JSON.parse(localStorage.getItem('last-requests'))
// Sample data
const lastReq = [
{city_name:"Istanbul", weather:"Cloudy"},
{city_name:"Madrid", weather:"Stormy"},
{city_name:"London", weather:"Sunny"}
];
console.log(lastReq)
for (req of lastReq) {
var clone = $($("#last-request-template").html());
clone.appendTo(".last-requests");
clone.find(".cityname").text(req.city_name);
clone.find(".cityweather").text(req.weather);
//clone.find(".imgs").attr('src', req.imgurl);
//clone.find(".citytemp").text(req.city_temp " °C");
//clone.find(".citywind").text(req.city_wind " m/s");
}
};
displayLastRequests().last-requests { border: 1px solid #CCC; }
.last-request .last-request { border-top: 1px solid #CCC; }
p { padding:5px; margin: 0; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="jumbotron bg-white">
<div class="container">
<h1>Latest requests</h1>
<h5 id="get-weather">We remember your five last requests for you </h5>
<template id='last-request-template'>
<div class='last-request'>
<!--<img src="" >-->
<p class="cityname"></p>
<p class="cityweather"></p>
<!--<p ></p>-->
<!--<p ></p>-->
</div>
</template>
<div class="last-requests"> </div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/486617.html
標籤：javascript html jQuery 阿贾克斯
下一篇：D3Y軸間隔25個數字