Question

我正在尝试构建一个函数来检查是否所有字段都已填充，如果已填充，则显示div（如果未隐藏）。

我可以将其用于一个领域，但是我尝试了两种检查多重性的方法。

第一如果满足第一个条件，我便运行另一个条件，检查嵌套在第一个条件内的第二个字段...这不起作用。

秒我传入了一个ID数组，而不是一个ID ...这也不起作用。

我只剩下一个工作功能，该功能只有在填充了第一个文件时才能起作用，任何人都可以想到解决方案，或者我可能不正确地传入了数组。

我的代码

var myVar = setInterval(myTimer, 10);

function myTimer() {

if(!document.getElementById('Email').value) { // I need this to pass if multiple id's
          var divsToHide = document.getElementsByClassName("somediv"); //divsToHide is an array
            for(var i = 0; i < divsToHide.length; i++){
                divsToHide[i].style.visibility = "hidden"; // or
                divsToHide[i].style.display = "none"; // depending on what you're doing

        }
    }
  else {
   var divsToHide = document.getElementsByClassName("somediv"); //divsToHide is an array
            for(var i = 0; i < divsToHide.length; i++){
                divsToHide[i].style.visibility = "visible"; // or
                divsToHide[i].style.display = "block"; // depending on what you're doing
  }
  }
}

Answer 1

进行此操作，以便您的函数接受元素ID和需要检查的类Name的参数。

也不要使用.getElementsByClassName()（read here for why）。而是使用.querySelectorAll()。

而且，您可以使用数组和节点列表的现代.forEach() API（尽管不是在IE中），它比管理带有索引的传统for循环要简单。

最后，请使用预制的CSS类，而不要使用内联样式。

// You just need to pass the ID and Class to the following line
var myVar = setInterval(function(){ myTimer([id here],[class here]) }, 10);

function myTimer(id, class) {
  // Set up these references just once and the rest of the code
  // will be easier to read
  var elem = document.getElementById(id);
  var divsToHide = document.querySelectorAll("." + class);
  
  // Instead of negative logic, reverse the if branches
  if(elem.value) {
    divsToHide.forEach(function(){
      this.classList.remove("hidden"); // Much simpler than inline styling
    });
  } else {
    divsToHide.forEach(function(){
      this.classList.add("hidden");
    });
}

/* Use pre-made CSS classes instead of inline styling */
.hidden { display:none; }

Answer 2

如果您有一个ID数组，例如

let idArray = ['foo', 'bar', 'baz']

您可以使用for循环遍历数组

for (i = 0; i > idArray.length; i++) {
    if (!document.getElementById(idArray[i]).value) { 
        // your hide logic
    } else {
        // your show logic
    }
}

Answer 3

您可以为所有需要验证的元素创建一个const。例如，

const elementIdsToBeValidated = ['name', 'email'];

您还可以创建根据输入返回true和false的验证函数，

const nameValidator = (val) => !!val;
const emailValidator = (email) => !!email;

const validators = [nameValidator, emailValidator];

然后您可以运行计时器功能，

var myVar = setInterval(myTimer(['name', 'email']), 10);

function myTimer(ids) {
  ids.forEach(id => {
    const el = document.getElementById(id);
    const val = el.value;
    const divEl = document.getElementById('error');
    const valid = validators.reduce((acc, validator) => validator(val), false);
    if(valid) {
      divEl.style.display = 'none';
    } else {
      divEl.style.display = 'block';
    }
  });
}

您可以看一下stackBlitz示例， https://stackblitz.com/edit/js-ie7ljf

getElementById检查多个条件

3 个答案: