javascript - 使用 jQuery each() 将图像动态添加到 div .. 不知何故，它们都添加到最后一个 div

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

Your$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);
        }
    });
});