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

我正在尝试动态制作一些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);

直到这里我都没有问题，但是我的问题就从我为页面写的代码开始，我也使它们动态地变化了，我想当我单击页面按钮时，然后显示出可见值的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();
        });
    });
}

如您所见，因为我在每个$里面都添加了$（“”），然后它从具有.Page1类的div中覆盖了我的$（this）地址-到$（“ /”）

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

如果我不在div上使用$（this）.data（）信息，那么我将无法恢复其背景图像，只有第一个图像会进入最后一个div或进行随机潜水，这就是问题所在

而主要问题是我想知道我的div已加载了自己的背景图像，因此我可以删除加载的gif动画，但我只发现了此有用的方法$（“”），但是当我在其中使用它时否则它将覆盖我的$（this）地址，或者我不知道如何引用比我的$（“”）高的以前的$（this）地址

谢谢你的帮助

最佳答案

您可以简单地使用'temp'变量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))
    );
}