JavaScript：获取点击事件的父元素值答案

【问题标题】：JavaScript: Get parent element values on click eventJavaScript：获取点击事件的父元素值
【发布时间】：2017-12-05 13:01:28
【问题描述】：

我对 JavaScript 完全陌生，正在努力让它发挥作用。单击按钮时，我正在尝试在警报框中显示联系方式。

信息显示在下面概述的嵌套 DIV 中：

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

我将这个 JavaScript 与 displayContactDetails 按钮上的事件侦听器一起使用，以在警报框中显示联系人详细信息。

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 来实现这一点？

【问题讨论】：

标签： javascript dom dom-events

【解决方案1】：

您的活动将包含定位相应电话元素的必要信息。

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);
}

或者使用 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);
});

使用 jquery 不仅更容易，而且对 html 结构的变化也更有弹性。 Jquery 将沿着 DOM 树向上，直到找到 .info div。使用纯 js，您必须硬编码跳转到父元素的次数，或者为其创建循环。

您也可以尝试建议的其他答案，但您还必须维护其工作所需的额外 ID 和标记。

【讨论】：

【解决方案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>

【讨论】：