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

}

}）;

我将$ selection声明为全局变量，但由于某种原因，当它在函数内部时，宽度或高度不会改变（选择的大小会改变）：如果我执行以下操作，它可以工作：

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

            })

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

如果有人理解发生了什么，我会非常感激，并且可以告诉我，我一直试图弄清楚这一点，但我真的很挣扎。非常感谢你

Answer 1

当你用$ selection包装$ image时，div现在是DOM中的一个新对象（$ selection的副本），而不是内存中实际断开连接的元素。尝试改为：

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

Answer 2

您并未将其声明为全局 - 您在document.ready时执行的函数范围内声明它。理想情况下，将var $selection放在document.ready之前，并在该函数内引用var时删除{{1}}。这将使它成为全球性的。

jquery全局变量不起作用

2 个答案: