2009-07-15 70 views
6
<div class="item"> 
    <p><img src="images/photos_sample1.jpg" 
      border="0" rel="images/google_map.jpg"></p> 
    <p>Dining Area</p> 
</div> 
<div class="item"> 
    <p><img src="images/photos_sample2.jpg" 
      border="0" rel="images/sample_photo.jpg"></p> 
    <p>Pool Area</p> 
</div> 

我有上面的HTML代碼,我想單擊圖像時獲取rel屬性的值。我寫這個jQuery腳本,但它似乎並沒有工作:如何使用jQuery獲取attr?

$('div.item').click(function() { 
    var getvalue = $('this > p > img').attr('rel'); 
    alert(getvalue); 
}); 

回答

11

替換此:

var getvalue = $('this > p > img').attr('rel'); 

有了這個:

var getvalue = $(this).find('p > img').attr('rel'); 

因爲它是現在你在做使用字面標記名稱的元素的全局搜索this

等效代碼也將是:

var getvalue = $('p > img', this).attr('rel'); 

雖然它的外觀的項目是圖像/標題組合,你不會真的指望其他圖像,在這種情況下,最好是剛做:

var getvalue = $(this).find('img').attr('rel'); 

或者,給它是一個描述性的類,並用img.someclassname取代img - 這會使得如果您稍後編輯您的HTML,您的Javascript不會因爲您的特定選擇器而中斷。

此外,你可以只單擊事件綁定到圖片本身:

$('div.item img').click(function() { 
    var getvalue = $(this).attr('rel'); 
}); 
0
$('div.item').click(function() { 
     var getvalue = $(this).find('> p > img').attr('rel'); 
     alert(getvalue); 
     }); 
0

不能使用「這個」這樣的。

嘗試:

$('div.item').click(function() { 
     var getvalue = $('p > img', this).attr('rel'); 
     alert(getvalue); 
     });