嗨，我創建了 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;
});
uj5u.com熱心網友回復：
這很簡單，使用回圈！
將您的所有 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;
});
});
小旁注：您正在尋找優化并且不想使用冗余代碼，這很好。只有這樣才能變得更好！
uj5u.com熱心網友回復：
<select>框預先構建了此功能，您無需在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/
uj5u.com熱心網友回復：
創建一個包含所有 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-formand存盤input_9_11在一個變數中，而不是在每次迭代時都找到它們。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/482191.html
標籤：javascript 循环 事件监听器