Question

froI有一个包含许多输入的表单，我想在聚焦的输入标签标签中添加一个类，并在选择另一个输入时删除类。

我制作了这样的代码

  onInputSelected: function(e) {
     var label =  e.target.previousElementSibling;
     label.classList.add('highlight');
  }

但是当我更改焦点时，如何从一个输入中删除类并添加到另一个输入？

更新

我找到了解决方案，但看起来很复杂：）

data: {
    allInputs: document.getElementsByTagName('input')
},
methods: {
    onInputSelected: function(e) {
        e.target.previousElementSibling.classList.add('highlight');
        [].forEach.call(this.allInputs, function (currentValue, index) {
             if(currentValue.name ==  this.name) {
                 return;
             }

              currentValue.previousElementSibling.classList.remove('highlight');
        }, e.target);
     }
}

Answer 1

首先，您不清楚要做什么。您已找到解决方案的第二个，因此只需清理代码即可。我尝试使用el.closest的所有方法的第3个。

const input = document.getElementById('yourInput');
const label = input.closest("label");
// or if you want to add ids to labels
const label2 = input.closest("#yourLabel");

Link to docs

使用此解决方案，您将节省更多。麻烦您，让我们想象一下有人更改了HTML结构...那么，您的代码停止工作的风险很高。

Vue2将类添加到聚焦输入

1 个答案: