在不同的卡片视图上显示数据

Question

我在单击按钮时在卡片上显示每个城市的天气数据

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(&quot;${list.toCity}&quot;);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;
                 }
               });
             });

  }

问题：函数的数据总是显示在第一张卡片上，即使其他卡片上的按钮被按下。我想在点击按钮后在每张卡片上单独显示天气数据。

Answer 1

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(&quot;${list.toCity}&quot;,${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;
                }
              });
            });

 }

Answer 2

尝试使用索引或名称 <p id="weatherdata_#{loop.count}"></p> 甚至 <p id="weatherdata_${list.name}"></p>

在脚本中使用该唯一 ID

在不同的卡片视图上显示数据

Displaying data on different card view

javascript

jquery

jstl

spring-mvc