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

Question

您好，我已经创建了 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;
});

Answer 1

创建一个包含所有 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 存储在一个变量中，而不是在每次迭代时都查找它们。

Answer 2

这个很简单，用循环！

将您所有的 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;
    });
});

小提示：很高兴您正在寻找优化并且不想使用冗余代码。只有这样才能变得更好！

Answer 3

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

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

<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>

我还添加了一个示例，说明当函数触发时如何获取“id”或附加到所选选项的任何其他属性。

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

https://jsfiddle.net/0b8vz9fq/

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

Could I write these event listeners in a more efficient way?

javascript

loops

event-listener