클릭시 요소 ID 가져 오기

Question

jQuery를 사용하여 구현 한 내 코드에 몇 개의 접을 수있는 세그먼트가 있습니다. 이처럼

: 위의 코드와 같은 몇 가지 더 동일한 부분이 있습니다

<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> 

.

내가이 머리글을 클릭 할 때마다이 머리글의 ID를 얻고 싶습니다. "Link1"을 클릭하면 ID가 팝업으로 표시됩니다.

나는 이미 팝업에서 ID를 표시하는 기능을 정의했습니다. 여기에 :

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

응용 프로그램을 실행하고 "Link1"을 클릭 할 때마다 빈 출력이 표시됩니다. 모든 링크에 대해 별도의 클래스를 선언하는 것은 옵션 인 것처럼 보입니다. 그러나 나는 다르게하고 싶습니다. 누구나이 요소의 ID를 얻는 방법에 대한 대안을 제안 할 수 있습니까 ??

Answer 1

제공된 마크 업은 사용자가이 요소에 ID를 부여하지 않았 음을 나타냅니다. 마크 업이 HREF을 가지고로 (또는 "ID"말할 때, 당신은 실제로 HREF 의미 :

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

그런 다음 당신이 할 수 있습니다 :

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

편집과 같이, 그들에게 ID를 제공하십시오 속성), 당신은 할 수 있습니다 :

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

Answer 2

먼저 핸들러가 바인딩 요소를 의미하는 경우가 this를 사용해야합니다. 이것을 고려하십시오 a 요소에 바인딩 핸들러가

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

경우, this.id가 aevent.target.id 동안이 b 될 것입니다 될 것입니다. 은event.target이 아니라면 this을 사용하십시오.

두 번째로 id 값은 상속되지 않습니다 (실제로는 고유해야하므로 의미가 없습니다). a 요소에 id 값을 지정하거나 문서를 탐색하여 관련 요소를 찾아 id으로 가져와야합니다.

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

그러나 당신의 h2 태그가 실제로 id이없는, 그래서 당신은 그것을 한 줄 필요가있다 :

는이 같은 코드로이 작업을 수행 할 수 있습니다. 해당 태그의 텍스트를 가져 오려면 text을 사용하십시오.

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