在具有特定类别的最近元素中显示文本

Question

我试图在具有 .msg 类的最近元素中显示文本，但它始终显示在具有 .msg 类的第一个元素中。

let btn = document.querySelectorAll('button');

btn.forEach(function(i) {
  i.addEventListener('click', function() {

    let x = document.querySelector('.msg').innerHTML = i.innerHTML;
    let z = x.closest(".msg");

  });
});

<div>
  <button class="btn">button 1</button>
  <p class="msg"></p>
</div>
<div>
  <button class="btn">button 2</button>
  <p class="msg"></p>
</div>
<div>
  <button class="btn">button 3</button>
  <p class="msg"></p>
</div>

如果我单击 Button1，文本应显示在 Button1 下方，如果我单击 Button2，文本应显示在 Button2 下方，依此类推...

Answer 1

closest

Element 接口的 closest() 方法遍历元素及其父元素（朝向文档根），直到找到与指定 CSS 选择器匹配的节点。

.msg

元素紧挨着

button

而不是它的父元素，所以你可以得到按钮的父元素即

div

，然后使用

querySelector

进入它得到

 .msg

元素.

let btn = document.querySelectorAll('button');

btn.forEach(function(i) {
  i.addEventListener('click', function() {
    const parentDiv = i.parentElement;
    parentDiv.querySelector('.msg').innerHTML = i.innerHTML;

  });
});

<div>
  <button class="btn">button 1</button>
  <p class="msg"></p>
</div>
<div>
  <button class="btn">button 2</button>
  <p class="msg"></p>
</div>
<div>
  <button class="btn">button 3</button>
  <p class="msg"></p>
</div>

Answer 2

试试这个

<script>
    let btn = document.querySelectorAll('button')

    btn.forEach(function (i, index) {
        i.addEventListener('click', function () {
            document.querySelectorAll('.msg')[index].innerHTML = i.innerHTML
        })
    })
</script>