失去了对 eventListener 的关注

Question

大家好，我尝试在 html 的标签中循环，当我按下一个按钮时需要更改 h2 的文本...但我不知道该怎么做。

这个我html

let contenedor = document.querySelector('.container');
let chText = document.querySelector('.change');

contenedor.addEventListener('click', (e) => {

    console.log(`Nombre: ${this.name} Nombre target: ${e.target.className}`);

    if(e.target.matches('.inicio')){

        changeText(e);
    }
});

function changeText(e){

    //console.log(e.currentTarget)
    chText.innerText = 'text Change';
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="card" style="border:1px solid gray; width: 20%">
      <h2 class="change">HIHO</h2>
      <button class="inicio">Change</button>
    </div>
     <div class="card" style="border:1px solid gray; width: 20%">
      <h2 class="change">HIHO</h2>
      <button class="inicio">Change</button>
    </div>
     <div class="card" style="border:1px solid gray; width: 20%">
      <h2 class="change">HIHO</h2>
      <button class="inicio">Change</button>
    </div>
  </div>
</body>
</html>

如果我使用 querySelectorAll 来 class 更改，请尝试循环，但这会更改所有文本..我想这样做只更改我按下的按钮的文本

如何在按钮和文本之间引用 (h2)..?

Answer 1

您可以使用 previousElementSibling...您必须从 e.target 开始才能知道要更改哪个 h2。

let contenedor = document.querySelector('.container');

// Don't define it here. That's the first one only, anyway.
//let chText = document.querySelector('.change');  

contenedor.addEventListener('click', (e) => {

  console.log(`Nombre: ${this.name} Nombre target: ${e.target.className}`);

  if (e.target.matches('.inicio')) {
    changeText(e);
  }
});

function changeText(e) {

  //console.log(e.currentTarget)
  //chText.innerText = 'text Change';
  e.target.previousElementSibling.innerText = 'text Change';
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div class="card" style="border:1px solid gray; width: 20%">
      <h2 class="change">HIHO</h2>
      <button class="inicio">Change</button>
    </div>
    <div class="card" style="border:1px solid gray; width: 20%">
      <h2 class="change">HIHO</h2>
      <button class="inicio">Change</button>
    </div>
    <div class="card" style="border:1px solid gray; width: 20%">
      <h2 class="change">HIHO</h2>
      <button class="inicio">Change</button>
    </div>
  </div>
</body>

</html>

如果你要在 h2 和 button 之间有一些其他元素，你将不得不寻找 closest 父 .card 然后寻找更改文本的元素...

let contenedor = document.querySelector('.container');

// Don't define it here. That's the first one only, anyway.
//let chText = document.querySelector('.change');  

contenedor.addEventListener('click', (e) => {

  console.log(`Nombre: ${this.name} Nombre target: ${e.target.className}`);

  if (e.target.matches('.inicio')) {
    changeText(e);
  }
});

function changeText(e) {
  e.target.closest(".card").querySelector(".change").innerText = 'text Change';
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div class="card" style="border:1px solid gray; width: 20%">
      <h2 class="change">HIHO</h2>
      <p>Something else...</p>
      <button class="inicio">Change</button>
    </div>
    <div class="card" style="border:1px solid gray; width: 20%">
      <h2 class="change">HIHO</h2>
      <p>Something else...</p>
      <button class="inicio">Change</button>
    </div>
    <div class="card" style="border:1px solid gray; width: 20%">
      <h2 class="change">HIHO</h2>
      <p>Something else...</p>
      <button class="inicio">Change</button>
    </div>
  </div>
</body>

</html>

失去了对 eventListener 的关注

Lost focus on eventListener

javascript

loops

addeventlistener