JQuery глобальные переменные не работают

Question

У меня возникли проблемы со следующим кодом

$(document).ready(function() { 
var $selection = $('<div class="image-selection" />') 
      .css({ 
       opacity : 0.5, 
       position : 'absolute' 

      }) 

var $content = $('.content'); 

$('img', $content).click(function(){selectItem($(this))}); 

function selectItem(itemSelected){  

    $image = itemSelected; 

    $image.wrap($selection); 

    $selection.width(150).height(150); 

} 

});

Я объявлял $ select как глобальную переменную, но по какой-то причине, когда она находится внутри функции, ширина или высота не изменяются (размер изменения выбора): , если я делаю следующее, он работает :

var $selection = $('<div class="image-selection" />') 
      .css({ 
       opacity : 0.5, 
       position : 'absolute' 

      }) 

var $content = $('.content'); 
$selection.width(150).height(150); 

Я очень ценю, если кто-то понимает, что происходит, и может сказать мне, я пытался понять это, но я действительно изо всех сил. Огромное спасибо

Answer 1

Когда вы переносите $ image с помощью $ selection, div теперь представляет собой новый объект (копию $ selection) в DOM, а не фактический отсоединенный элемент в памяти. Попробуйте изменить на это:

$image.wrap($selection); 
$image.parent('div.image-selection').width(150).height(150); 

Answer 2

Вы не объявляете его глобальным - вы объявляете его в рамках функции, выполняемой при document.ready. В идеале положите var $selection до document.ready и удалите var, когда вы обратитесь к нему внутри этой функции. Это сделает его глобальным.