Javascript 仅在填充所有输入字段后启用元素。可重用函数

我正在尝试编写一个可重用的函数，该函数在所有输入字段中循环，如果任何字段为空，我希望另一个元素（a href或button）切换类名（禁用）

目前它可以在第一个输入上工作，但不能在第二个输入上工作，我认为这与jquery选择器有关

JS:

HTML:

单击以添加视频缩略图
或将其拖动到此处

文件格式：
文件大小：

上传。。。
完成
错误。

我在这里做了一把小提琴：

我有点理解创建这个函数和只针对一个选择器，但我的目标是使它可重用，不管是1个输入还是100个输入

---

TIA

问题在于，类的切换只依赖于集合中的最后一个输入，就像您在循环中那样编写它

您可以使用

filter（）

获取空集合（如果有的话），并使用该集合长度来确定类切换

使用with的布尔第二个参数也比在条件语句中编写

addClass（）

和

removeClass（）

更简单

比如：

const toggleElemValidInput = (input, elem, className) => {
    const hasEmpty = !!input.filter((i,el) => !el.value.trim()).length;
    elem.toggleClass(className, hasEmpty);
};

---

过滤所有的文本框。如果没有空类，请将该类设置为可见

var query = "input[type=\"text\"]";

$(query).on("input change", () =>
{
  if($(query).filter((a, b) => $(b).val().length == 0).length == 0)
       $(".fileUploader-wrapper").addClass("visible");
  else
       $(".fileUploader-wrapper").removeClass("visible");
});
  

---

嗯，逻辑是有意义的（过滤所选的输入）我试着把它放到更新的小提琴中：但它似乎不起作用。在这个简化的版本中效果很好。谢谢，我已经设法重构了它，这样它就可以重用了。美好的

const toggleElemValidInput = (input, elem, className) => {
    const hasEmpty = !!input.filter((i,el) => !el.value.trim()).length;
    elem.toggleClass(className, hasEmpty);
};

var query = "input[type=\"text\"]";

$(query).on("input change", () =>
{
  if($(query).filter((a, b) => $(b).val().length == 0).length == 0)
       $(".fileUploader-wrapper").addClass("visible");
  else
       $(".fileUploader-wrapper").removeClass("visible");
});