javascript - 如何检查 getElementsByClassName 位置？

Question

我有一个带有自定义标题和按钮的产品列表(li 元素)。此外，还有一个弹出表单，可以通过单击任何按钮来触发。

Click me! 按钮和标题一样多，但它们都会触发相同的弹出窗口。

我想要实现的是，弹出表单的表单输入元素的值是根据按钮的位置从特定标题中获取的。因此，如果我单击“第二个标题”按钮下的“点击我!”，则输入元素值将填充“第二个标题”。

这是我想出来的，但不知何故它行不通。我得到相同的值。有人可以帮我找出问题所在吗？

提前致谢!

var title = document.getElementsByClassName('title');
var titleText;
var i;						
for (i = 0; i < title.length; i++) {
		titleText = title[i].innerText;
		console.log("Name: " + titleText + ", position: " + i);
}
document.getElementById('inserthere').value = titleText; 

<ul class="products-list">
<li class="product">
<h2 class="title">First title</h2>
<a class="button" href="#">Click me!</a>
</li>
<li class="product">
<h2 class="title">Second title</h2>
<a class="button" href="#">Click me!</a>
</li>
<li class="product">
<h2 class="title">Third title</h2>
<a class="button" href="#">Click me!</a>
</li>
<li class="product">
<h2 class="title">Fourth title</h2>
<a class="button" href="#">Click me!</a>
</li>
</ul>
<div class="popup">
<input type="text" id="inserthere" value="">
</div>

Answer 1

您可以通过获取单击的元素来检索文本，检索同级元素(通过父元素)，选取其文本，然后显示该文本:

// We use event delegation, by picking up the bubbled-up click event 
//   in the container element. This way we only to bind only one click handler 
document.querySelector(".products-list").addEventListener("click", function (e) {
    if (e.target.classList.contains("button")) { // The click was on a button class
        // Go to the button's parent and find the title underneath it:
        document.getElementById("inserthere").value = 
            e.target.parentNode.querySelector(".title").textContent;
    }
});

<ul class="products-list">
    <li class="product">
        <h2 class="title">First title</h2>
        <a class="button" href="#">Click me!</a>
    </li>
    <li class="product">
        <h2 class="title">Second title</h2>
        <a class="button" href="#">Click me!</a>
    </li>
    <li class="product">
        <h2 class="title">Third title</h2>
        <a class="button" href="#">Click me!</a>
    </li>
    <li class="product">
        <h2 class="title">Fourth title</h2>
        <a class="button" href="#">Click me!</a>
    </li>
</ul>

<div class="popup">
    <input type="text" id="inserthere" value="">
</div>