0

Spring MVCを使用していますが、データベース内のレコードを検索し、レコードのリストを別のページに返すフォームがあります。ただし、返されるデータはタグに画像を描画します。フォームには最初の画像のみが描画され、残りは描画されません。これはjqueryのループ内のクロージャーに関係していることは知っていますが、ここでどのように克服できますか？

jscriptにいくつかの編集を加えましたが、最初の画像のみがすべてのキャンバスに表示されます

JavaScript：

$（document）.ready（function（）{

    $(".photos").each(function(i){                      
        if ($(this).val() != '') {
            alert($(this).val());
            var image = new Image();
                var foto = $(".photos").val();                         
                image.src =  $(".photos").val();
                image.onload = function(){ 
                    //var foto = $(".photos").val();                         
                    //image.src =  $(".photos").val();
                     $(".canvas").each(function(i){
                         var ctx = document.getElementsByClassName("canvas")[i].getContext('2d');
                         ctx.drawImage(image,0,0, 320, 240); 
                     });                        
                }                   
        }
    });                     
});

CitizenList.jsp：

<title>Citizen Search Results</title>
 </head>
  <body>
   <c:forEach items="${citizens}" var="citizen">
    <div><p><canvas class="canvas" height="240" width="320"></canvas></div>
        First name:- ${citizen.fName} , Last Name:- ${citizen.lName}
        <input type="text" value="${citizen.photo}" class="photos"/>
    </c:forEach>

   </body>
  </html>
4

2 に答える 2

1

photo1つのIDで入力ボックスが複数回作成されています。

<input type="text" id="photo" value="${citizen.photo}"/>

の内部foreach。

<c:forEach items="${citizens}" var="citizen">

これは次のようにhtmlをレンダリングします：

<div><p><canvas id="canvas" height="240" width="320"></canvas></div>
    First name:-Jim , Last Name:- Doe
    <input type="text" id="photo" value="xyz"/>

<div><p><canvas id="canvas" height="240" width="320"></canvas></div>
    First name:- Bob , Last Name:- Doe
    <input type="text" id="photo" value="abc"/>

そしてもちろん、jQueryルックアップ$("#photo")は最初のものにのみ一致します。

代わりに、クラスを与えて、それらを反復処理することができます。

<input type="text" id="photo${status.id}" class="photo" value="${citizen.photo}"/>

そして、jQueryforeachでそれらを繰り返します

$('.photo').each(function(){ //..
于 2013-03-08T17:39:35.730 に答える
1

参照する必要のある画像ソース$(this).val()。各キャンバスを反復処理する必要はありませんでしたが、インデックスを使用して現在のキャンバスに移動するだけで済みました。完成したソリューションは次のとおりです。

 <script type="text/javascript">

    $(document).ready(function() {

            $(".photos").each(function(i){                      
                if ($(this).val() != '') {
                       var image = new Image();                      
                        image.src =  $(this).val();

                        image.onload = function(){ 
                                 var ctx = document.getElementsByClassName("canvas")[i].getContext('2d');
                                 ctx.drawImage(image,0,0, 320, 240); 
                         }               
                }
            });                     
        });

    </script>
于 2013-03-09T01:24:35.993 に答える