如何查看 getElementsByClassName 的位置？

Question

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

点击我！ 按钮和标题一样多，但它们都触发相同的 pop-up。

我想实现的是弹出表单的form input元素的值是根据按钮的位置取自特定的title。所以，如果我点击按钮 Second title 下的 Click me!，输入元素值将填充为 Second title .

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

提前致谢！

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>

Answer 2

第一，don't use .getElementsByClassName() - ever. And, in this case you don't even need to get all the elements. Just handle the click event at the ul level because all events will "bubble" up to their ancestor. Handling events this way is called "event delegation".

但是，您也错误地使用了 HTML。

a 元素用于导航，而不是用于可以触发的东西 JavaScript。几乎所有元素都支持 click 事件，因此请使用 span 并将其样式设置为看起来像超链接。
不要因为它们的外观而使用标题 (h1...h6)。他们是表示一个部分的开始或 sub-section。再次，选择一个更好的元素并按照您喜欢的方式设置样式。
不要使用 input 元素进行输出。使用占位符，例如 span 相反。

查看内联评论：

let output = document.getElementById("out");

// Set up the event handler on the common ancestor of all the elements that will
// be clicked and handle the click event there ("event delegation")
document.querySelector(".products-list").addEventListener("click", function(event){
  
  // You can get a reference to the actual element that the event was triggered on
  // through the event object reference that was passed into the event handler
  if(event.target.classList.contains("button")){
    // Now just get the text of the previous sibling that is an element
    output.textContent = event.target.previousElementSibling.textContent;
  }

});

.title { font-weight:bold; font-size:1.1em; }
.button { color:blue; cursor:pointer; text-decoration:underline; }
#out { width:10em; height:1em; border:1px solid #808080; }

<ul class="products-list">
  <li class="product">
    <div class="title">First title</div>
    <span class="button">Click me!</span>
  </li>
  <li class="product">
    <div class="title">Second title</div>
    <span class="button">Click me!</span>
  </li>
  <li class="product">
    <div class="title">Third title</div>
    <span class="button">Click me!</span>
  </li>
  <li class="product">
    <div class="title">Fourth title</div>
    <span class="button">Click me!</span>
  </li>
</ul>
<div class="popup">
  <div id="out"></div>
</div>

Answer 3

如果您对文本的顺序感兴趣，因为您在代码中使用了 i，您可以使用 forEach( (value, index) => {...} ):

const inserthere = document.getElementById('inserthere');

[...document.getElementsByClassName('button')].forEach( (button, i) => 
    button.addEventListener('click', function() {
       let titleText = event.target.previousElementSibling.innerText;
       inserthere.value = titleText;
       console.log("Name: " + titleText + ", position: " + i);
    })
)

<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>
<br><br>

如何查看 getElementsByClassName 的位置？

How to check getElementsByClassName's position?

javascript

arrays

getelementsbyclassname