jquery - 如何防止 jquery 中两个 $(this) 之间的冲突？

Question

我正在尝试动态制作一些 div 并首先给它们 .css('display','none')

我想为这些 div 设置背景图像，但我只想在它们可见时加载这些背景，我使用这段代码在 div 上制作加载 gif，然后在加载背景图像时隐藏它

$("<img/>").attr('src', 'Groups/items/thumbs/101.jpg').load(function() {
    $(this).remove(); // this $(this) back to $(<img/>)

    $("#Frames_img").css(   
        'background-image','url("Groups/items/thumbs/101.jpg")'});
    $("#Frames_loader").hide();
});
$("#Frames_img").addClass('Page');
$("#Frames_img").data("Page", i);

直到这里我都没有问题，但我的问题从我为我的页面编写的代码开始，我也动态地制作它们，我想当我点击我的页面按钮时，然后在显示上有可见值(value)的任何 div 得到他们的图像源并将其加载为背景图像

现在我的代码是这样的:

$("#Frames_img").data("imgurl", 'Groups/items/thumbs/101.jpg')

我把这些写在我的页面按钮上

if ($(".Page"+$(this).data("Page")).is(':visible')) {
    $("#Stage").find( $(".Page"+$(this).data("Page")) ).each(function(){                                    
        $("<img/>").attr('src', ''+$(this).data("imgurl")+'').load(function() {
            $(this).remove(); // this $(this) back to $(<img/>)
            $("#Frames_img").css(   
                'background-image','url("'+$(this).data("imgurl")+'")'});
            $("#Frames_loader").hide();
        });
    });
}

正如你所看到的，因为我在每个里面添加了 $("") 然后它覆盖了我的 $(this) 地址从那些有 .Page1 类的 div 例如 - 到 $("/")

我如何解决这个问题才能使它们正常工作？

如果我不在我的 div 上使用 $(this).data() 信息，那么我就无法取回它们的背景图像，只有第一张图像会转到最后一个 div 或随机跳转，这就是问题所在

这里的主要问题是我想知道我的 div 加载了自己的背景图像，这样我就可以删除我的加载 gif 动画，我只找到了这个有用的方法 $("") 但是当我使用在这种情况下，它将覆盖我的 $(this) 地址，或者我不知道如何引用我以前的 $(this) 地址，该地址高于我的 $("")

谢谢你的帮助

Answer 1

您可以简单地使用“临时”变量 var thisCopy = $(this);

if ($(".Page"+$(this).data("Page")).is(':visible')) {
    $("#Stage").find( $(".Page"+$(this).data("Page")) ).each(function(){

        var thisCopy = $(this);
        $("<img/>").attr('src', ''+$(this).data("imgurl")+'').load(function() {
            $(this).remove(); // this $(this) back to $(<img/>)
            $("#Frames_img").css('background-image','url("'+thisCopy.data("imgurl")+'")');
            $("#Frames_loader").hide()
        });
    })
}

或者使用一些闭包

if ($(".Page"+$(this).data("Page")).is(':visible')) {
    $("#Stage").find( $(".Page"+$(this).data("Page")) ).each(
        (function(stage){
            return function(){
                $("<img/>").attr('src', '' + $(this).data("imgurl") + '').load(function(){
                    $(this).remove(); // this $(this) back to $(<img/>)
                    $("#Frames_img").css('background-image', 'url("' + stage.data("imgurl") + '")');
                    $("#Frames_loader").hide()
                });
            };
        })($(this))
    );
}