Javascript创建循环变量答案

【问题标题】：Javascript create looping variablesJavascript创建循环变量
【发布时间】：2021-08-11 04:54:27
【问题描述】：

var select1 = document.getElementById('status-kehadiran1');
select1.onchange = function () {
    select1.classList.remove("hijau");
    select1.classList.remove("merah");
    select1.classList.add(this.options[this.selectedIndex].className);
}
var select2 = document.getElementById('status-kehadiran2');
select2.onchange = function () {
    select2.classList.remove("hijau");
    select2.classList.remove("merah");
    select2.classList.add(this.options[this.selectedIndex].className);
}
var select3 = document.getElementById('status-kehadiran3');
select3.onchange = function () {
    select3.classList.remove("hijau");
    select3.classList.remove("merah");
    select3.classList.add(this.options[this.selectedIndex].className);
}
var select4 = document.getElementById('status-kehadiran4');
select4.onchange = function () {
    select4.classList.remove("hijau");
    select4.classList.remove("merah");
    select4.classList.add(this.options[this.selectedIndex].className);
}
var select5 = document.getElementById('status-kehadiran5');
select5.onchange = function () {
    select5.classList.remove("hijau");
    select5.classList.remove("merah");
    select5.classList.add(this.options[this.selectedIndex].className);
}
var select6 = document.getElementById('status-kehadiran6');
select6.onchange = function () {
    select6.classList.remove("hijau");
    select6.classList.remove("merah");
    select6.classList.add(this.options[this.selectedIndex].className);
}
var select7 = document.getElementById('status-kehadiran7');
select7.onchange = function () {
    select7.classList.remove("hijau");
    select7.classList.remove("merah");
    select7.classList.add(this.options[this.selectedIndex].className);
}
var select8 = document.getElementById('status-kehadiran8');
select8.onchange = function () {
    select8.classList.remove("hijau");
    select8.classList.remove("merah");
    select8.classList.add(this.options[this.selectedIndex].className);
}
var select9 = document.getElementById('status-kehadiran9');
select9.onchange = function () {
    select9.classList.remove("hijau");
    select9.classList.remove("merah");
    select9.classList.add(this.options[this.selectedIndex].className);
}
var select10 = document.getElementById('status-kehadiran10');
select10.onchange = function () {
    select10.classList.remove("hijau");
    select10.classList.remove("merah");
    select10.classList.add(this.options[this.selectedIndex].className);
}

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

my html select elements

因为我有 10 个具有不同 id 的选择元素

view

每个变量的目的是在有更改所选选项时更改每个选择的文本颜色

希望你能明白我的解释

【问题讨论】：

使用event delegation而不是分配多个事件 — 它更易于维护，并且适用于动态添加的元素。例如，使用event argument 的target。见the tag info 和What is DOM Event delegation?。

标签： javascript html jquery loops variables

【解决方案1】：

不要使用 ID，而是为所有这些选择使用通用选择器 - 例如 [name^="pertemuan"]（名称属性以 pertemuan 开头）：

for (const select of document.querySelectorAll('[name^="pertemuan"]')) {
    select.addEventListener('change', () => {
        select.classList.remove("hijau", "merah");
        select.classList.add(select.options[select.selectedIndex].className);
    });
}

【讨论】：

【解决方案2】：

您可以删除 id 并将 status-kehadiran 移动到选择类列表中。您可以使用.querySelectorAll() 选择所有这些并使用.forEach() 循环遍历它们

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

【讨论】：

【解决方案3】：

正如其他人提到的，您可以使用带有名称和 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);
    });
});

【讨论】：

【解决方案4】：

您可以先使用Document.querySelectorAll() 选择所有具有id 的元素，然后循环它们并使用EventTarget.addEventListener() 一个一个地附加事件（change）。

您可以尝试以下方法：

//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);
  });
});

【讨论】：