Question

我试图在几个画布上绘制从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>

Answer 1

请勿在{{1}}回调中使用隐式this。而是使用.each()提供的命名参数。

此外，你有两个一个.each()和一个$(document).ready(function)嵌套在其中。你只需要其中一个。

由于您使用的是jQuery，因此无需使用$(function)。

我推荐一种重度较低的嵌套样式。当您编写document.getElementById()或.each()来电等时，将回调函数的开头放在与.ready()相同的行上会有所帮助。这消除了您不需要的嵌套级别。

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

.each

您有多个元素都具有var ctx = document.getElementById("photoCvs").getContext('2d'); ctx.drawImage(image, 0, 0,200, 200);，这是无效的HTML。浏览器通常会容忍它，但id="photoCvs"只会返回第一个。

有许多不同的方法可以解决这个问题。第一，如果您的HTML按照您使用canvas元素显示的方式排列为document.getElementById()输入元素的下一个兄弟，那就是使用jQuery的.citizen方法。

无论您采用何种方式，都要从所有画布元素中删除.next()。

总而言之，你可能最终得到这个：

id="photoCvs"

Answer 2

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

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

<强> CODE

基本上这就是诀窍 - 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 );

                }                   

            }
        });
    });

使用jQuery在几个不同的画布元素上绘制图片

2 个答案: