[英]JavaScript multiple event handler with same class input
我需要处理多个事件，这些事件将动态生成相同的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>
您可以先获取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>
尝试将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
});
})
您可以定位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 onclick事件处理程序
[英]how to use javascript onclick event handler for same class of anchor elements
Javascript-AppendChild一个具有相同类的多个div的输入
[英]Javascript - AppendChild an input to multiple divs with the same class
在Javascript中为同一个事件处理程序实现2个函数是否可行？
[英]Is it posible to implement 2 functions for the same event handler in Javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.