Question

我需要处理多个事件，这些事件将动态生成相同的HTML。我为所有元素添加了addEventListener。同时获得不同的事件值。现在，我只需要将此结果设置为这个obj子.display元素。

const inputs = document.querySelectorAll('.input-box');
inputs.forEach((input) => {
  input.addEventListener('input', function(e) {
    //console.log(e.target.value);
    //Method 1
    e.target.parentNode.querySelector('.display').innerHTML = e.target.value;
    //Method 2
    //e.target.nextElementSibling.innerHTML = e.target.value;
  });

})

body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 80%;
  margin: 0 auto;
  padding: 10px;
  overflow:auto;
  height: 100vh;
}

.input-box {
  width: 200px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Event Handeller</title>
</head>

<body>
  <div class="input-box">
    <p>Search Box 1</p>
    <input type="text">
    <div class="display">Search Box 1 Result</div>
  </div>
  <div class="input-box">
    <p>Search Box 2</p>
    <input type="text">
    <div class="display">Search Box 2 Result</div>
  </div>
  <div class="input-box">
    <p>Search Box 3</p>
    <input type="text">
    <div class="display">Search Box 3 Result</div>
  </div>
  <div class="input-box">
    <p>Search Box 4</p>
    <input type="text">
    <div class="display">Search Box 4 Result</div>
  </div>


</body>

</html>

Answer 1

您可以先获取parentNode，然后再使用querySelector()

e.target.parentNode.querySelector('.display').innerHTML = e.target.value;

或者另一种方法是使用nextElementSibling

e.target.nextElementSibling.innerHTML = e.target.value;

const inputs = document.querySelectorAll('.input-box');
inputs.forEach((input) => {
  input.addEventListener('input', function(e) {
    e.target.nextElementSibling.innerHTML = e.target.value;
  });

})

body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 80%;
  margin: 0 auto;
  padding: 10px;
  overflow:auto;
  height: 100vh;
}

.input-box {
  width: 200px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Event Handeller</title>
</head>

<body>
  <div class="input-box">
    <p>Search Box 1</p>
    <input type="text">
    <div class="display">Search Box 1 Result</div>
  </div>
  <div class="input-box">
    <p>Search Box 2</p>
    <input type="text">
    <div class="display">Search Box 2 Result</div>
  </div>
  <div class="input-box">
    <p>Search Box 3</p>
    <input type="text">
    <div class="display">Search Box 3 Result</div>
  </div>
  <div class="input-box">
    <p>Search Box 4</p>
    <input type="text">
    <div class="display">Search Box 4 Result</div>
  </div>


</body>

</html>

Answer 2

尝试将parentNode用于querySelector：

const inputs = document.querySelectorAll('.input-box');
inputs.forEach((input) => {
    input.addEventListener('input', function(e) {
       //console.log(e.target.value);
       e.target.parentNode.querySelector('.display').innerHTML = e.target.value
    });
})

Answer 3

您可以定位parent，然后使用querySelector定位类为display的兄弟姐妹

const inputs = document.querySelectorAll('.input-box');
inputs.forEach((input) => {
  input.addEventListener('input', function(e) {
    e.target.parentNode.querySelector('.display').innerHTML = e.target.value
  });

})

body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 80%;
  margin: 0 auto;
  padding: 100px;
}

.input-box {
  width: 200px;
}

<div class="input-box">
  <p>Search Box 1</p>
  <input type="text">
  <div class="display">Search Box 1 Result</div>
</div>
<div class="input-box">
  <p>Search Box 2</p>
  <input type="text">
  <div class="display">Search Box 2 Result</div>
</div>
<div class="input-box">
  <p>Search Box 3</p>
  <input type="text">
  <div class="display">Search Box 3 Result</div>
</div>
<div class="input-box">
  <p>Search Box 4</p>
  <input type="text">
  <div class="display">Search Box 4 Result</div>
</div>

具有相同类输入的JavaScript多个事件处理程序

3 个答案: