我正在尝试动态制作一些 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) 地址,该地址高于我的 $("")
谢谢你的帮助
最佳答案
您可以简单地使用“临时”变量 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 - 如何防止 jquery 中两个 $(this) 之间的冲突?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25957390/