我是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来实现这一目标?
答案 0 :(得分:2)
您的活动将有必要的信息来找到相应的电话元素。
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和标记。
答案 1 :(得分:0)
我希望在函数调用上传递一个独特的信息
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;