我可以以更有效的方式编写这些事件侦听器吗？答案

【问题标题】：Could I write these event listeners in a more efficient way?我可以以更有效的方式编写这些事件侦听器吗？
【发布时间】：2022-06-15 05:41:01
【问题描述】：

您好，我创建了 9 个非常相似的事件侦听器，如果可能的话，我想以更有效的方式编写它们。每个按钮都会打开相同的隐藏表单并使用不同的值填充下拉菜单。

const ordermulch = document.getElementById('Mulch');
ordermulch.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 1;
});
const orderptopsoil = document.getElementById('prem-topsoil');
orderptopsoil.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 2;
});
const orderstopsoil = document.getElementById('screened-topsoil');
orderstopsoil.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 3;
});
const ordercgravel = document.getElementById('crushed-gravel');
ordercgravel.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 4;
});
const orderpgravel = document.getElementById('pea-gravel');
orderpgravel.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 5;
});
const orderrrock = document.getElementById('river-rock');
orderrrock.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 6;
});
const orderhpbed = document.getElementById('bedding');
orderhpbed.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 7;
});
const ordersand = document.getElementById('sand');
ordersand.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 8;
});
const ordergseed = document.getElementById('grass-seed');
ordergseed.addEventListener('click', () => {
    document.getElementById('order-form').style.display = "block";
    document.getElementById("input_9_11").selectedIndex = 9;
});

【问题讨论】：

ids（覆盖物、prem-topsoil、screened-topsoil 等）适用于哪些元素？

标签： javascript loops event-listener

【解决方案1】：

这很简单，使用循环！

在一个数组中收集你所有的 ID：

const ids = ['Mulch', 'prem-topsoil', 'screened-topsoil']; // and so on...

遍历这个数组：

ids.forEach((value, i) => {
    // todo
});

对于每次迭代，您必须首先获取元素：

const element = document.getElementById(value);

现在您可以将 EventListener 添加到此元素：

element.addEventListener('click', () => {
    document.getElementById('order-form').style.display = 'block';
    document.getElementById('input_9_11').selectedIndex = i+1;
});

大家一起：

const ids = ['Mulch', 'prem-topsoil', 'screened-topsoil']; // and so on...
ids.forEach((value, i) => {
    const element = document.getElementById(value);
    element.addEventListener('click', () => {
        document.getElementById('order-form').style.display = 'block';
        document.getElementById('input_9_11').selectedIndex = i+1;
    });
});

附带说明：您正在寻找优化并且不想使用冗余代码，这很好。只有这样才能变得更好！

【讨论】：

【解决方案2】：

<select> 框预先构建了此功能，您无需在每次选择项目时手动设置selectedindex。您可以将事件绑定到<select> 元素的“更改”侦听器，然后用更少的代码拉动selectedindex，而不是将事件附加到单个选择项（列表中的内容）的单击事件。

示例：假设您的 html 看起来像这样......

var products = document.getElementById('select');
products.addEventListener('change', function(e) {
  var index = products.selectedIndex;
  console.log("Index: " + index + ' - ' + e.target.options[index].getAttribute('id'));
  document.getElementById('input_9_11').value = e.target.options[index].getAttribute('id');
})

<form id="order-form">
  <select id="select">
    <option id="mulch">Mulch</option>
    <option id="prem-topsoil">Premium Topsoil</option>
    <option id="screened-topsoil">Screened Topsoil</option>
    <option id="crushed-gravel">Crushed Gravel</option>
    <option id="pea-gravel">Pea Gravel</option>
    <option id="river-rock">River Rock</option>
    <option id="bedding">Bedding</option>
    <option id="sand">Sand</option>
    <option id="grass-seed">Grass Seed</option>
  </select>
  <input type="text" id="input_9_11">
</form>

https://jsfiddle.net/0b8vz9fq/

【讨论】：

【解决方案3】：

创建一个包含所有 ID 的数组，然后对其进行迭代以添加事件侦听器：

const ids = ['Mulch', 'prem-topsoil', 'screened-topsoil']; // ...rest of IDs

ids.forEach((id, index) => {
    const elem = document.getElementById(id);

    elem.addEventListener('click', () => {
        document.getElementById('order-form').style.display = "block";
        document.getElementById("input_9_11").selectedIndex = index + 1;
    });
})

您还应该将order-form 和input_9_11 存储在一个变量中，而不是在每次迭代时都找到它们。

【讨论】：