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);

直到这里我没有问题，但我的问题从我为我的页面编写的代码开始，我也动态制作它们，我想当我点击我的页面按钮然后什么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动画我只发现这个有用的方法$（“”）但是当我使用在这种情况下它会覆盖我的$（这个）地址，或者我不知道我怎么能引用我之前的$（这个）地址高于我的$（“”）

感谢您的帮助

Answer 1

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

如何防止jquery中两个$（this）之间的冲突？

1 个答案: