如何使用父錨的href設置圖像src？

Question

我有以下鏈接，應該顯示的鏈接內的圖像時加載的javascript：

<a href="http://upload.wikimedia.org/wikipedia/commons/a/ae/Mad_scientist.svg" id="a"> 
<img alt="no image"> 
</a> 

的JavaScript應該獲得鏈接的href屬性，並書面說明的HTML時包括它圖片。

$('#a').html('<img src="' + $(this).attr('href') + '">image'); 

不知何故，$(this).attr('href')將返回undefined。這有什麼問題？

JsFiddle

Answer 1

DEMO

$('#a').html(function() { 
    return '<img src="' + $(this).attr('href') + '">image' 
}); 

函數返回的HTML內容進行設置。收到集合中元素的索引 位置和舊的HTML值爲 參數。 jQuery在調用函數之前清空元素;使用 oldhtml參數來引用先前的內容。在 函數中，這指的是集合中的當前元素。

Refrence

http://api.jquery.com/html/#html-functionindex--oldhtml

http://learn.jquery.com/javascript-101/this-keyword/

在你的代碼

$('#a').html('<img src="' + $(this).attr('href') + '">image'); 

$(this)在你的代碼是不明確的。

例如。

$('#a').html(function() { 
     return '<img src="' + $(this).attr('href') + '">image' 
}); 

在上面的代碼this指的是當前元素即元素與id="a"

Answer 2

var obj= $("#a"); 
obj.html('<img src="' + obj.attr('href') + '">image');