Javascript创建循环变量

有没有办法为这些变量创建一个循环以使其更简单

因为我有10个不同id的select元素

每个变量的用途是在更改选定选项时更改每个选定项的文本颜色

---

我希望您能理解我的解释

不要使用ID，而是对所有这些选择使用公共选择器-例如

[name^=“pertemuan”]

（name属性以pertemuan开头）：

---

您可以首先使用选择ID为的所有元素，然后通过它们循环并使用逐个附加事件（更改）

您可以尝试以下方法：

//you can select by exact id
//var sel = document.querySelectorAll('#status-kehadiran1, #status-kehadiran2, #status-kehadiran3, #status-kehadiran4, #status-kehadiran5, #status-kehadiran6, #status-kehadiran7, #status-kehadiran8, #status-kehadiran9, #status-kehadiran10');

//you can select by id startsWith selector by matching the common part of each id 
var sel = document.querySelectorAll('[id^=status-kehadiran]');
sel.forEach(function(el){
  el.addEventListener('change', function(){
    el.classList.remove("hijau", "merah"); //you can remove multiple class separating them with comma
    el.classList.add(el.options[el.selectedIndex].className);
  });
});

---

您可以删除ID并将

状态kehadiran

移动到选择类列表中。您可以使用选择所有这些对象，并使用在其上循环

---

正如其他人提到的，您可以使用带有名称和ID的查询选择器，但也可以为它们分配一个公共类并使用-

document.getElementsByClassName('.name of class')
.forEach(function(select) {
    select.addEventListener('change', function() {
        this.classList.remove('hijau', 'merah');
        this.classList.add(this.selectedOptions[0].className);
    });
});

使用而不是分配多个事件 — 它更易于维护，并且适用于动态添加的元素。例如，使用an's。见和。

//you can select by exact id
//var sel = document.querySelectorAll('#status-kehadiran1, #status-kehadiran2, #status-kehadiran3, #status-kehadiran4, #status-kehadiran5, #status-kehadiran6, #status-kehadiran7, #status-kehadiran8, #status-kehadiran9, #status-kehadiran10');

//you can select by id startsWith selector by matching the common part of each id 
var sel = document.querySelectorAll('[id^=status-kehadiran]');
sel.forEach(function(el){
  el.addEventListener('change', function(){
    el.classList.remove("hijau", "merah"); //you can remove multiple class separating them with comma
    el.classList.add(el.options[el.selectedIndex].className);
  });
});

document.querySelectorAll('.status-kehadiran')
  .forEach(function(select) {
    select.addEventListener('change', function() {
      this.classList.remove('hijau', 'merah');
      this.classList.add(this.selectedOptions[0].className);
    });
  });

document.getElementsByClassName('.name of class')
.forEach(function(select) {
    select.addEventListener('change', function() {
        this.classList.remove('hijau', 'merah');
        this.classList.add(this.selectedOptions[0].className);
    });
});