使用“this”在节点的子节点上应用事件答案

【问题标题】：Apply an event on a node's child with 'this'使用“this”在节点的子节点上应用事件
【发布时间】：2011-12-18 00:11:44
【问题描述】：

我有一个动态创建 div 框并在其上放置事件的函数。在框中，我创建了一个 a 节点，并在其中创建了一个 img 节点。当我单击 a 节点时，事件将触发并且背景图像将在另一个 div 上更改。下面你可以看到我的代码，就像现在一样，'this.src' 指向 a-node，这当然不起作用。

有没有办法指向a节点的孩子，即。那条线上的 img 节点？

var box = $('<div/>', {
    'class': 'imgDiv',
    'width': maxWidth,
    'height': maxHeight,
}).appendTo('.windowContent');

var a = $('<a/>', {
    'href': '#',
}).appendTo(box)

var img = $('<img/>', {
    'src': 'pics/' + this.fileName,
    'width': this.thumbWidth,
    'height': this.thumbHeight,
}).appendTo(a);

$(a).click(function() {
    $('#desktop').css("background-image", "url(" + this.src + ")");  
});

【问题讨论】：

标签： jquery events dom

【解决方案1】：

this 确实会指向在点击处理程序内部被点击的锚点。您对此无能为力，但您的点击处理程序将在您的 img 变量上形成一个闭包。

这是你想要的吗？

$(a).click(function() {
    $('#desktop').css("background-image", "url(" + img.attr("src") + ")");  
});

编辑

正如 Felix 指出的那样，a 已经是一个 jQuery 对象，所以你可以简单地这样做：

a.click(function() {
    $('#desktop').css("background-image", "url(" + img.attr("src") + ")");  
});

【讨论】：

应该是img.attr('src')，不是吗？
注意a已经是一个jQuery对象了（所以不需要再传给jQuery了）。
@JasonCraig - 你确定你的img 被正确创建了吗？
在使用 img.attr('src') 时效果很好。谢谢！
好的，知道了。所以这是一个然后完成。他不会在同一页面上重复这一点。

【解决方案2】：

是的，你可以这样做：

a.click(function() {
    var $imgSrc = $(this).find("img").attr("src");
    $('#desktop').css("background-image", "url(" + $imgSrc + ")");  
});

【讨论】：

【解决方案3】：

我猜你可以这样做：

$(a).click(function() {
    $('#desktop').css("background-image", "url(" + $(this).find("img").attr("src") + ")");  
});

【讨论】：

@FelixKling 当然你是对的，更新了我的答案。谢谢！
我不是这个意思 ;) $(this) 是正确的，但您可以将 $(a) 更改为 a。