我可以以更有效的方式編寫這些事件偵聽器嗎？

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

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

Answer 2

創建一個包含所有 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 3

這很簡單，使用循環！

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

小旁注：您正在尋找優化並且不想使用冗余代碼，這很好。 只有這樣才能變得更好！