0

我试图在几个画布上绘制从 ajax 请求返回的元素，但是它只是将所有图像绘制到第一个画布上。

如何访问成功函数中的每个画布元素来绘制图像？

jQuery

$(document).ready( function() {

    $('.citizen').each( function( i, citizen) {
        $.ajax({
            type : 'GET',
            url : 'getCitizenPhoto.htm',
            data : {
                socialSecurityNumber : $(citizen).val()
            },
            dataType : 'text',
            success : function(data,i) {


                var image = new Image();
                image.src = data;
                image.onload = function() {
                    var ctx = document
                    .getElementById("#photoCvs")
                    .getContext('2d');
                     ctx.drawImage( image, 0, 0, 200, 200 );

                }
            }
        });
    });

HTML

        <p>Victims</p>

        <c:forEach items="${victimMonitoringList}" var="victims">
        <div id="victim_row">
 <input class="citizen" id= "socialSecurityNumber" value= "${vitims.socialSecurityNumber}"/>
        <canvas id="photoCvs" class="canvas" height="200" width="200"></canvas>
        </div>  

        <div id="criminals">

        <c:forEach items="${criminalMonitoringList}" var="criminals">
        <div id="criminal_row">
     <p>Criminals</p>
    <input class="citizen" id= "socialSecurityNumber" value= "${criminal.socialSecurityNumber}"/>
        <canvas id="photoCvs" class="canvas" height="200" width="200"></canvas>
        </div>
4

2 回答 2

1

不要this在.each()回调中使用隐式。相反，使用.each()提供的命名参数。

此外，您在其中嵌套了a$(document).ready(function)和 a 。$(function)你只需要其中之一。

而且由于您使用的是 jQuery，因此您不需要使用document.getElementById().

我推荐一种不那么重嵌套的样式。当您编写.each()or.ready()调用等时，将回调函数的开头与.each. 这消除了您不需要的嵌套级别。

那么关于你的实际问题。所有图像都进入同一个画布的原因是这段代码告诉它要做的事情：

var ctx = document.getElementById("photoCvs").getContext('2d');
ctx.drawImage(image, 0, 0,200, 200);

您有多个元素都具有id="photoCvs"，这不是有效的 HTML。浏览器通常会容忍它，但document.getElementById()只会返回第一个。

有许多不同的方法可以处理这个问题。第一，如果您的 HTML 的排列方式与您将 canvas 元素作为.citizen输入元素的下一个兄弟元素一起显示的方式排列，则可以使用 jQuery 的.next()方法。

不管你怎么做，id="photoCvs"从所有的画布元素中删除。

把它们放在一起，你可能会得到这样的结果：

$(document).ready( function() {
    $('.citizen').each( function( i, citizen ) {
        $.ajax({
            type : 'GET',
            url : 'getCitizenPhoto.htm',
            data : {
                socialSecurityNumber : $(citizen).val()
            },
            dataType : 'text',
            success : function(data) {
                var image = new Image();
                image.src = data;
                image.onload = function() {
                    var ctx = $(citizen).next()[0].getContext('2d');
                    ctx.drawImage( image, 0, 0, 200, 200 );
                }
            }
        });
    });
});
于 2013-04-28T22:04:41.943 回答
0

闭环的绝佳解决方案。当您进行ajax调用时，您无法访问回调/成功函数中的索引值。为了避免 ajax 函数中使用的索引的范围问题，您想要做的是存储索引的值然后使其在回调函数中可用。

闭环的绝佳解决方案。当您进行 ajax 调用时，您无法访问回调/成功函数中的索引值。下面是我对这个问题的解决方案：

代码

基本上这成功了 - valueOfi

$(document).ready( function() {

       $('.citizen').each( function( i, citizen) {
        $.ajax({
            type : 'GET',
            url : 'getCitizenPhoto.htm',
            valueOfi:i,
            data : {
                socialSecurityNumber : $(citizen).val()
            },
            dataType : 'text',
            success : function(data) { 
                i=this.valueOfi;
                alert(i);
                var image = new Image();
                image.src = data;
                image.onload = function() {
                var ctx = document.getElementsByClassName("canvas")[i].getContext('2d');
                ctx.drawImage( image, 0, 0, 200, 200 );

                }                   

            }
        });
    });
于 2013-04-29T02:13:46.253 回答