无法使用 javascript classList 在选择选项中添加或更改类

Question

我正在使用 admin lte 3 bootstrap 4。 我想使用 javascript classList 添加/更改选择选项输入（下拉列表）的类。 下拉列表的背景和验证颜色将根据所选选项而改变，使用添加或更改类。

如果我选择 Person 2，背景颜色变为绿色（bg-success）。 当我使用硬代码或在检查元素浏览器中手动更改该类时，该类效果很好。 但是当 onchange 选择时脚本不能添加/更改类。 脚本在输入类型文本中工作得很好，我使用它们进行输入文本验证。我不知道为什么不在选择选项中工作。

function changeclass($value) {
  var element = document.getElementById(event.target.id);
  console.log($value); //works great, return value of option
  console.log(event.target.id); //works great, return element id = person
  if ($value == 1) {
    if (element.classList.contains("bg-success") == true) element.classList.replace("bg-success", "bg-warning");
    if (element.classList.contains("bg-danger") == true) element.classList.replace("bg-danger", "bg-warning");
    if (element.classList.contains("bg-warning") == true) element.classList.replace("bg-warning", "bg-warning");
    if (element.classList.contains("bg-warning") == false) element.classList.add("bg-warning");
    console.log(element.classList.contains("bg-success")); //works great, return false because no class bg-successin select class
    console.log(element.classList.contains("color-pallete")); //works great, return true
  }
  if ($value == 2) {
    if (element.classList.contains("bg-success") == true) element.classList.replace("bg-success", "bg-success");
    if (element.classList.contains("bg-danger") == true) element.classList.replace("bg-danger", "bg-success");
    if (element.classList.contains("bg-warning") == true) element.classList.replace("bg-warning", "bg-success");
    if (element.classList.contains("bg-success") == false) element.classList.add("bg-success");
  }
  //.... until 4

  if (element.classList.contains("is-valid") == false) element.classList.add("is-valid");

}

.bg-warning {
    background-color: #ffc107 !important;
}

.bg-success {
    background-color: #28a745 !important;
}

<select id="person" class="form-control color-pallete" onchange="changeclass(value);">
  <option value='1'>person 1</option>
  <option value='2'>person 2</option>
  <option value='3'>person 3</option>
  <option value='4'>person 4</option>
</select>

有什么建议吗？ 谢谢你:)

Answer 1

这就是我会做的事情：

function changeclass($value, $list) {
  var element = $list;
  // Remove all classes
  element.classList.remove("bg-warning");
  element.classList.remove("bg-success");
  element.classList.remove("bg-danger");
  element.classList.remove("bg-normal");
  // Now add on the class based on the selection
  if ($value == 1) {
    element.classList.add("bg-warning");
  } else if ($value == 2) {
    element.classList.add("bg-success");
  } else if ($value == 3) {
    element.classList.add("bg-danger");
  } else {
    element.classList.add("bg-normal");
  }
  // Not sure what these are for as there is no css classes called "is-valid" or "color-pallete"!
  //if (element.classList.contains("is-valid") == false) element.classList.add("is-valid");
  //console.log(element.classList.contains("color-pallete")); //works great, return true
}

.bg-warning {
    background-color: #ffc107 !important;
}

.bg-success {
    background-color: #28a745 !important;
}

.bg-danger {
  background-color: red !important;
}

.bg-normal {
  background-color: white !important;
}

<select id="person" class="form-control color-pallete" onchange="changeclass(value, this);">
  <option value='0'>--Select--</option>
  <option value='1'>Warning</option>
  <option value='2'>Success</option>
  <option value='3'>Danger</option>
  <option value='4'>Normal</option>
</select>

我没有事件处理程序，所以event.target.id 对我不起作用。相反，我更新了 onchange 函数以传递 this，它是对元素本身的引用。有些行我没有样式，所以无法测试那里会发生什么。

这个想法是，与其检查 classList 是否包含一个类，不如简单地将它们全部删除（如果类名不存在，你不会破坏任何东西），然后只需 add() 正确的类根据选择。我已经包含了所有四个选项的类，只是为了表明它正在工作。