我在点击按钮时显示卡上每个城市的天气数据
JSP页面
<c:forEach var="list" items="${listHist}">
<div class="w3-container">
<ul class="w3-ul w3-card-4">
<li class="w3-bar">
<span onclick="this.parentElement.style.display='none'" class="w3-bar-item w3-button w3-white w3-xlarge w3-right">×</span>
<img src="resources/assets/images/a1.png" class="w3-bar-item w3-circle w3-hide-small" style="width:85px">
<div class="w3-bar-item">
<span><font size="6">Name : ${list.name}</font></span><br>
<span>
<ul><li class="card-text">Ticket Number : ${list.ticketNo}
<li class="card-text">From : ${list.fromCity}
<li class="card-text">To : ${list.toCity}
<li class="card-text">Date : ${list.travelDate}
<li class="card-text">Travel Class : ${list.travelClass}
<li class="card-text">Gender : ${list.gender}
<li class="card-text">Passenger type : ${list.ptype}
<li class="card-text">Price : ${list.price}
<p id="weatherdata"></p>
</li>
</ul>
</span>
<font color="white"><button type="button" class="btn btn-danger" onclick="currWeather("${list.toCity}");myFunction();" style="margin-left: 0px ">Weather</button></font>
</div>
</div>
</c:forEach>
我的剧本 我使用了jquery天气脚本,其中yahoo api用于获取该城市的天气数据
function currWeather(city){
var city =city;
$(document).ready(function() {
$.simpleWeather({
location: city+', IN',
woeid: '',
unit: 'c',
success: function(weather) {
$("p").slideToggle();
/* $("div") */
document.getElementById("weatherdata").innerHTML=weather.code+" "+weather.temp+ " "+weather.units.temp+" "+weather.currently;
},
error: function(error) {
document.getElementById("weatherdata").innerHTML=error;
}
});
});
}
问题:即使按下其他卡上的按钮,该功能的数据也会始终显示在第一张卡上。我想在点击按钮后在每张卡上单独显示天气数据。
答案 0 :(得分:0)
JSP页面
<c:forEach var="list" items="${listHist}">
<div class="w3-container">
<ul class="w3-ul w3-card-4">
<li class="w3-bar">
<span onclick="this.parentElement.style.display='none'" class="w3-bar-item w3-button w3-white w3-xlarge w3-right">×</span>
<img src="resources/assets/images/a1.png" class="w3-bar-item w3-circle w3-hide-small" style="width:85px">
<div class="w3-bar-item">
<span><font size="6">Name : ${list.name}</font></span><br>
<span>
<ul><li class="card-text">Ticket Number : ${list.ticketNo}
<li class="card-text">From : ${list.fromCity}
<li class="card-text">To : ${list.toCity}
<li class="card-text">Date : ${list.travelDate}
<li class="card-text">Travel Class : ${list.travelClass}
<li class="card-text">Gender : ${list.gender}
<li class="card-text">Passenger type : ${list.ptype}
<li class="card-text">Price : ${list.price}
<p id="weatherdata_${list.ticketNo}"></p>
</li>
</ul>
</span>
<font color="white"><button type="button" class="btn btn-danger" onclick="currWeather("${list.toCity}",${list.ticketNo});" style="margin-left: 0px ">Weather</button></font>
</div>
</div>
</c:forEach>
我的剧本:
function currWeather(city,ticketNo){
console.log(ticketNo);
console.log(city);
var city =city;
$(document).ready(function() {
$.simpleWeather({
location: city+', IN',
woeid: '',
unit: 'c',
success: function(weather) {
$("#weatherdata_"+ticketNo).slideToggle();
/* $("div") */
document.getElementById("weatherdata_"+ticketNo).innerHTML=weather.code+" "+weather.temp+ " "+weather.units.temp+" "+weather.currently;
},
error: function(error) {
document.getElementById("weatherdata_"+ticketNo).innerHTML=error;
}
});
});
}
答案 1 :(得分:0)
尝试使用索引或名称<p id="weatherdata_#{loop.count}"></p>
甚至<p id="weatherdata_${list.name}"></p>
在脚本中使用该唯一ID