Javascript 中的替代方案

Question

我在 codepen 上有这段代码：https://codepen.io/RaoniSousa/pen/Zpkxbb:

var x = document.querySelectorAll('.label'), //label com ID label,
    z = document.querySelectorAll('.input'); //input com ID name;

function myFunction() {
'use strict';
if (this.value !== "" ) {
    this.style.opacity = '1';
    this.style.bottom = '4em';
    this.style.color = '#722872';
    console.log(this);
} else {
    this.style.opacity = '0';
    this.style.bottom = '1.5em';
    console.log(this);
    }
}

在上面的函数中，我只想更改标签的样式 (var x)。我知道 'this' 指的是 .input (var z)，但是，我想将样式应用于标签，因为我更改他的相关输入值，但如果我使用 for 循环，他会同时调用所有标签。有没有办法通过使用'this.style'来调用var x intead of var z，或者有人知道此代码的另一种替代方法？

我希望它像这里发生的那样工作（向下滚动栏直到到达 联系我 部分）：https://codepen.io/freeCodeCamp/pen/YqLyXB

提前致谢。

Answer 1

试试这个

function myFunction() {
    'use strict';
    if (this.value !== "" ) {
        this.nextElementSibling.style.opacity = '1';
        this.nextElementSibling.style.bottom = '2em';
        this.nextElementSibling.style.color = '#722872';
        console.log(this.nextElementSibling);
    } else {
        this.style.opacity = '.4';
        this.style.bottom = '.5em';
        console.log(this);
    }
}

Javascript 中的替代方案

Alternative to This in Javascript

javascript

arrays

input

this

selectors-api