Question

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

我在displayContactDetails按钮上使用此JavaScript和事件监听器，以在警告框中显示联系人详细信息。

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的详细信息。

如何遍历DOM来实现这一目标？

Answer 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和标记。

Answer 2

我希望在函数调用上传递一个独特的信息

＆＃13;

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

＆＃13;

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

＆＃13;

JavaScript：在click事件中获取父元素值

2 个答案: