'this'を含むノードの子にイベントを適用する

Question

私はdivボックスを動的に作成し、それらにイベントを入れる機能を持っています。ボックス内では、aノードを作成し、そのノード内にimg-nodeを作成します。 aノードをクリックするとイベントが発生し、別のdivで背景イメージが変更されます。下に私のコードを見ることができます。そして、今のところ、 'this.src'はaノードを指しています。これはもちろん動作しません。

aノードの子を指す方法はありますか？その行のimg-node？

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

Answer 1

thisは、実際にクリックハンドラの内部でクリックされたアンカーを指します。あなたはそれについて何もすることはできませんが、あなたのクリックハンドラはあなたのimg変数の上に閉包を形成します。

これは必要なものですか？

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

EDIT

フェリックスが指摘するように、あなたが簡単に行うことができますので、aは、既にjQueryオブジェクトである：

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

Answer 2

私はあなたが行うことができると思います：

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

Answer 3

はい、次のようにすることができます：

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