Question

所以我试图浏览一个库中的每个图像，然后用另一个从php返回的图像覆盖它。我收集所有的，然后迭代它们，创建一个“保持框架”，然后添加动态图像。

不知何故，他们都在添加我处理的最终图像。每个图像都有一个帧，但新图像都叠加在图库中的最终图像上。

我做错了什么。我已经使用that = this来处理AJAX回调中的范围，

var $allPics = $(".pixelsandwich");
$allPics.each(function(){

    $(this).wrap('<div class="pixelsandwichFrame" />');
    src = $(this).attr('src');
    $that = $(this); 
    $.ajax({
        type:"POST",
        url:"js/pixelsandwich/pixelsandwich.php",
        data:{src:src},
        success:function(response){
            newImg = $("<img class='crunched'>");
            newImg.attr('src', response);
            frame = $that.parent();
            frame.append(newImg); // << these are all appending to the frame of the last image instead of each one
        }
    });
});

Answer 1

您的$that是一个全局变量（因为它缺少var），所以它在循环的每一步都被覆盖。在本地声明：

$(".pixelsandwich").each(function () {

    var $that = $(this).wrap('<div class="pixelsandwichFrame" />');

    $.ajax({
        type: "POST",
        url: "js/pixelsandwich/pixelsandwich.php",
        data: { src: $that.attr('src') },
        success: function (response) {
            var newImg = $("<img class='crunched'>").attr('src', response);
            $that.parent().append(newImg);
        }
    });
});

使用jQuery each（）动态地向div添加图像..不知何故，它们都添加到最后一个div

1 个答案: