如何检查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>

我有一个带有自定义标题和按钮的产品列表（li元素）。此外，还有一个弹出表单，可通过单击任何按钮来触发。有多少点击我！按钮，如...

Answer 1

您可以通过单击被单击的元素来检索文本，通过父元素检索同级，拾取其文本，然后显示该文本：

Answer 2

首先，don't use .getElementsByClassName() - ever。而且，在这种情况下，您甚至不需要获取所有元素。只需在.getElementsByClassName()级别处理点击事件即可。