如何从单击的元素中获取最接近H3的innerHTML

Question

<div class="profile">
<h3 class="name">Bob Chester</h3>
<div class="position">Janitor</div>
<div class="action">
<a class="bio-click" href="/url/to/bio">Click Here For Bio</a>
</div>
</div>

我试图将最近点击的URL的名称捕获到JS变量中。在这种情况下，如果您单击"；点击此处获取生物信息"；url，则变量将捕获"url"；Bob Chester"；。

最好的方法是什么？我正在创建一个我想要返回的跟踪标签"；Bob Chester-生物点击"；或者当他们点击url时类似的东西。

Answer 1

像这个

最接近的是关键字

在这里，我从最近的静态容器进行委派。您的容器会有所不同，因此请将document.getElementById("container")更改为相关的容器

document.getElementById("container").addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.classList.contains("bio-click")) { // did we click a link?
e.preventDefault(); // stop click  - remove this if you want the link to work
const name = tgt.closest(".profile").querySelector(".name").textContent;
console.log(name); // your method here
}  
})

<div id="container">
<div class="profile">
<div class="name">Hannibal Lector</div>
<div class="position">Serial killer</div>
<div class="action">
<a class="bio-click" href="/url/to/bio">Click Here For Bio</a>
</div>
</div>

<div class="profile">
<div class="name">Bob Chester</div>
<div class="position">Janitor</div>
<div class="action">
<a class="bio-click" href="/url/to/bio">Click Here For Bio</a>
</div>
</div>
</dov>