자바 스크립트 : 클릭 이벤트에서 부모 요소 값 가져 오기

Question

전 자바 스크립트를 처음 사용하고이를 해결하기 위해 고심하고 있습니다. 버튼을 클릭하면 알림 상자에 연락처 세부 정보를 표시하려고합니다.

정보는 아래에 설명 중첩 된 DIV에 표시됩니다 : 내가 경고 상자에 연락처 세부 정보를 표시합니다 displayContactDetails 버튼에 이벤트 리스너를 통해이 자바 스크립트를 사용하고

<div class="info-and-actions"> 
<div class="info"> 
    <div class="name-container"> 
    <h4 class="name"><a href="#" title="Name" class="name-link">Trader 1</a></h4> 
    </div> 
<div class="details-container"> 
    <p class="tele">###############</p> 
    <p class="email">hello@url.com</p> 
</div> 
    <div class="actions"> 
    <button class="displayContactDetails">Display contact details</button> 
    </div> 
</div> 
</div> 

<div class="info-and-actions"> 
<div class="info"> 
    <div class="name-container"> 
    <h4 class="name"><a href="#" title="Name" class="name-link">Trader 2</a></h4> 
    </div> 
<div class="details-container"> 
    <p class="tele">###############</p> 
    <p class="email">hello@url.com</p> 
</div> 
    <div class="actions"> 
    <button class="displayContactDetails">Display contact details</button> 
    </div> 

.

function displayContactDetails() { 
var contactName = document.querySelector("a.name-link.profile-link").textContent; 
var contactTele = document.querySelector("p.tele").textContent; 
alert("Contact " + contactName + " on " + contactTele); 
} 

현재 displayContactDetails 버튼을 클릭하면 첫 번째 상인의 연락처 정보가 표시됩니다.

버튼의 부모 요소 (.name-container 및 .details-container)에서 관련 연락처 정보를 선택하면 두 번째 버튼을 클릭하면 Trader 2의 세부 정보가 표시됩니다.

어떻게 이것을 달성하기 위해 DOM을 트래버스합니까?

Answer 1

함수 호출에 고유 한 정보를 전달하겠습니다. jQuery로 JQuery와

$('.displayContactDetails').on('click', function(e){ 
    var name = $(this) 
       .closest('.info') // goes up in the tree until .info 
       .find('.name').html(); // then back to .name and get content 

    alert(name); 
}); 

와

function displayContactDetails(e) { 
    var contactName = e. currentTarget // this is the element that has the click listener 
     .parentNode // this would be .actions div 
     .parentNode // this would be .info div 
     .querySelector('.name a') // the link with the name 
     .innerHTML; // the inner contents of the link, in this case the name 

    // repeat but change querySelector to grab the telephone 

    alert("Contact " + contactName + " on " + contactTele); 
} 

또는 쉽다는 것이 아니라 쉽게 할뿐만 아니라, HTML 구조의 변화에보다 탄력적이다. Jquery는 .info div를 찾을 때까지 DOM 트리를 확장합니다. 일반 js를 사용하면 부모 요소로 건너 뛰거나 반복 할 횟수를 하드 코딩해야합니다.

다른 답변을 시도해 볼 수도 있지만 작동하려면 추가 ID와 마크 업을 유지해야합니다.

Answer 2

내가 당신의 이벤트가 해당 전화 요소를 찾습니다하는 데 필요한 정보를해야합니다

  function displayContactDetails(id){ 
 
      var contactName = document.getElementById("name-link-"+id).textContent; 
 
     
 
      alert("Contact " + contactName); 
 
      } 
 

<div class="info-and-actions"> 
 
    <div class="info"> 
 
     <div class="name-container"> 
 
     <h4 class="name"><a href="#" title="Name" id="name-link-one">Trader 1</a></h4> 
 
     </div> 
 
    <div class="details-container"> 
 
     <p class="tele">###############</p> 
 
     <p class="email">hello@url.com</p> 
 
    </div> 
 
     <div class="actions"> 
 
     <button class="displayContactDetails" onclick="displayContactDetails('one')">Display contact details</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="info-and-actions"> 
 
    <div class="info"> 
 
     <div class="name-container"> 
 
     <h4 class="name"><a href="#" title="Name" id="name-link-two">Trader 2</a></h4> 
 
     </div> 
 
    <div class="details-container"> 
 
     <p class="tele">###############</p> 
 
     <p class="email">hello@url.com</p> 
 
    </div> 
 
     <div class="actions"> 
 
     <button class="displayContactDetails" onclick="displayContactDetails('two')">Display contact details</button> 
 
     </div>