如果输入字段有任何值，则在文档中定位输入字段并设置和删除类名

Question

我有一堆输入字段，我想在其中设置一个someClass 名称，前提是输入字段具有某些值。如果没有，请删除 someClass 名称。

我目前正在研究使用 JavaScript 操作表单和表单字段，这是我正在编写的代码。

// Add a class to an element, without removing/affecting existing values

var inputs = document.getElementsByTagName('input');

for (var i = 0; i < inputs.length; i++) {

  // Set HTML elements collection index?
  var input = inputs[i];

  input.addEventListener('input', function() {

    if (input.value.length > 0 && !input.className.match(/(?:^|\s)someClass(?!\S)/)) {
        console.log("Input has some value");
        input.className += "someClass";
    }

    if (input.value.length == 0) {
        console.log("Input is empty");
        input.className = input.className.replace( /(?:^|\s)someClass(?!\S)/g , '' );
    }

  });
}

当前代码仅在最后一个输入字段上执行它应该执行的操作。我突然想到，每次有新循环时，var input 都会被覆盖。 所以我想通过循环中的一些条件语句来定位当前元素。除了手动分配输入的一些属性之外，我想不出其他任何东西（我对此知之甚少）。

Answer 1

您遇到的问题是每个输入事件侦听器都在更新 w/e 元素变量 input 代表 在事件触发时，因此只更新该元素.

所以时间线是这样的：

1. 将事件侦听器添加到输入 1 | input = 输入1
2. 将事件侦听器添加到输入 2 | input = input2
3. 将事件侦听器添加到输入 3 | input = 输入3

所有 3 个事件侦听器都将更改变量 input 持有的元素，此时它只是 input3。

4. 用户点击输入和类型
5. var input 即 input3 得到更新

正如 Sean 指出的，您需要每个 eventListener 函数来更新触发该事件的特定元素。这里有 3 个选项：

1. 使用 this 关键字 https://jsfiddle.net/5gbnykme/1/

2. 使用event.target 作为参考 https://jsfiddle.net/5gbnykme/2/

3. 使用包装函数在本地范围内限定变量 https://jsfiddle.net/5gbnykme/3/

TL;DR 确保在事件侦听器中调用的元素是触发事件的元素。