2012-05-08 227 views
2

我在我的代碼中使用jQuery實現了幾個可摺疊的段。點擊獲取元素ID

像這樣:

<h2 class="expand">Link1</h2> 
       <div class="collapse"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
        eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
        qui officia deserunt mollit anim id est laborum.</p>     
        <p class="top"><a href="#content">Top of page</a></p> 
       </div> 

還有像上面的代碼幾個相同的部分。

我想要獲得這些標題,當我點擊它的每個標識。說,當我點擊「Link1」時,我想讓它的ID彈出。

我已經定義了在彈出窗口中顯示id的函數。這裏是:

$(document).ready(function() { 
     $("a").click(function (event) { 
      alert(event.target.id); 
     }); 
    }); 

每當我運行應用程序,並點擊(說)「Link1」,我得到一個空白輸出。聲明所有鏈接的單獨類似乎是一種選擇,但我想這樣做,否則.. 任何人都可以提出任何其他方式來獲取這些元素的Id?

+2

添加ID到您的** A **標籤,它不會自動創建! –

回答

6

您提供的標記暗示您沒有爲這些元素提供標識。試着給他們一個ID,像這樣:

<a id="contentLink" href="#content">Top of page</a> 

然後,你可以這樣做:

$(document).ready(function() { 
    $("a").click(function (event) { 
     alert($(this).attr("id")); 
    }); 
}); 

編輯:或者,如果當你說 「ID」,你實際上意味着HREF(如您的標記有HREF屬性),那麼你可以做:

$(document).ready(function() { 
    $("a").click(function (event) { 
     alert($(this).attr("href")); 
    }); 
}); 
2

首先,你應該使用this如果你的意思是在處理程序綁定的元素。試想一下:

<a href="#content" id="a"><span id="b">foo</span></a> 

如果綁定的a元素上的處理程序,this.idaevent.target.idb。除非你的意思是event.target,請使用this。其次,id值不會被繼承(事實上,因爲它們必須是唯一的,所以它們是沒有意義的)。您或者需要給a元素一個id值,或者您需要遍歷文檔並找到相關元素以獲取其id

您可以用代碼做到這一點是這樣的:

$(this).closest('div').prev().attr('id') 

然而h2標籤實際上並沒有一個id,所以你需要給它一個。如果你想獲得該標籤的文本,使用text

$(this).closest('div').prev().text() 
+0

用於解釋event.target – CyprUS