JavaScript 选择器无法正常获取值？解决问题及最佳实践

2024-03-23 07:39:37

JavaScript 选择器无法正确返回选择值：问题、解决方案和最佳实践

引言

在使用 JavaScript 与 HTML 选择器交互时，获取选择的值至关重要。但是，有时代码可能无法正确返回所选值，这可能会导致混乱和不必要的故障排除。本文将探讨导致此问题的一个常见原因及其解决方法，同时还将介绍 JavaScript 选择器和最佳实践的最佳用法。

问题：在事件处理程序外获取值

常见的陷阱之一是在事件处理程序外部获取选择的值。例如，考虑以下代码：

var selObj = document.getElementById("event");
var selValue = selObj.selectedIndex;

selObj.addEventListener("change", function() {
  // ...
});

当事件发生时，selValue 的值可能尚未更新，因为它在事件处理程序外部获取。这可能导致选择值不正确。

解决方案：在事件处理程序中获取值

为了正确获取选择的值，应该在事件处理程序中获取它：

selObj.addEventListener("change", function() {
  var selValue = this.options[this.selectedIndex].value;
});

这样，选择的值将在事件发生时正确检索。

逻辑错误：错误隐藏扩展字段

在原代码中，还有一个逻辑错误，它错误地隐藏了扩展字段。根据问题，扩展字段应在选择 "Nein" 时隐藏，而不是 "choose" 时。

修正后的代码如下：

var Extended = document.querySelectorAll(".extended")
var selObj = document.getElementById("event");

selObj.addEventListener("change", function() {
  var selValue = this.options[this.selectedIndex].value;

  if (selValue === "no") {
    Extended.forEach(el => el.classList.add("visually-hidden"));
  } else {
    Extended.forEach(el => el.classList.remove("visually-hidden"));
  }
});

最佳实践：使用事件委托

为了提高效率，建议使用事件委托来处理事件。这涉及将事件监听器附加到父元素，而不是每个子元素。然后，可以在父元素中使用事件冒泡来确定发生事件的子元素。

以下代码示例演示了事件委托：

var container = document.getElementById("container");

container.addEventListener("click", function(e) {
  // 获取点击的目标元素
  var target = e.target;

  // 根据目标元素的类名采取行动
  if (target.classList.contains("button")) {
    // ...
  }
});