JavaScript：クリックイベントで親要素の値を取得する

Question

私はJavaScriptを完全に使いこなしています。ボタンをクリックすると、連絡先の詳細をアラートボックスに表示しようとしています。

情報は以下のとおりネストされたdiv要素内に表示されます。私は、アラートボックスに連絡先の詳細を表示するには、displayContactDetailsボタンにイベントリスナーで、このJavaScriptを使用しています

<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）から関連する連絡先情報を選択すると、2番目のボタンをクリックすると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ツリーを上にします。プレーンjでは、親要素にジャンプする回数をハードコーディングするか、またはループを作成する必要があります。

提案されている他の回答も試すことができますが、それが機能するために必要な追加の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>