javascript - 如何检查 getElementsByClassName 的位置？

Question

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

有多少 点我！按钮，许多标题，但它们都会触发相同的弹出窗口。

我想要实现的是弹出表单的表单输入元素的值是根据按钮的位置从特定的标题中获取的。所以，如果我点击点击我！在第二个标题按钮下，输入元素的值将用第二个标题填充。

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

提前致谢！

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>

标签： javascriptarraysgetelementsbyclassname

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>