Как предотвратить конфликт между двумя $ (this) в jquery?

Question

Я пытаюсь сделать некоторые div динамически и дать им .css ('display', 'none') сначала

Я хочу установить фоновое изображение для этих div, но я хочу загрузить эти фоны только тогда, когда они видны, я использую этот код, чтобы сделать загрузки GIF на DIV скрыть его, когда фоновое изображение загружается

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

, как вы можете видеть, потому что я добавить $ («») внутри каждого, то он переписывает мой $ (этот) адрес из тех div, которые имеют класс .Page1, например, - $ $ ("/")

Как я могу управлять этой проблемой, чтобы заставить их работать?

, если я не использую $ (это) .data() информацию о моих дивы, то я не могу вернуть свои фоновые изображения и только первое изображение будет идти в последний ДИВ или случайного погружения и то неполадку

и главная проблема заключается в том, что я хочу узнать, что мой div имеет свой фоновый образ, загруженный, поэтому я могу удалить свою анимацию gif загрузки, и я нашел этот полезный метод $ (""), но когда я его использую в этом случае он будет перезаписывать мой $ (это) адрес, или я не знаю, как я могу сослаться на мой предыдущий $ (это) адрес, который был верхним, чем мои $ («»)

спасибо за вашу помощь

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