仅在填写所有输入字段后才启用元素。可重复使用的功能

Question

我正在尝试编写一个循环遍历所有输入字段的可重用函数，如果有任何输入字段为空，我希望另一个元素（href 或按钮）切换为 class 名称（禁用）。

目前它适用于第一个输入但不适用于第二个，我认为这与 jquery 选择器有关。

JS:

const toggleElem = () => {
    const parent = $('.fileUploader--videos');
    const $input = parent.find('[type="text"]'); // I think this is the issue
    const $wrapper = parent.find('.fileUploader-wrapper');
    const visibleClass = 'visible';
    $input.on('change input', () => {
        toggleElemValidInput($input, $wrapper, visibleClass);
    });
};

toggleElem();

const toggleElemValidInput = (input, elem, className) => {
    input.each(function() {
        if ($(this).val() !== '') {
        // also would prefer if ($(this).val().length !== 0)
            elem.addClass(className);
        } else {
            elem.removeClass(className);
        }
    });
};

HTML:

<div class="fileUploader col fileUploader--videos hasAdvancedUpload" data-action="/api/v1/ProductMediaVideoUploadApi" data-method="post">
  <label for="videoTitle" class="mb-3">
    <input type="text" name="videoTitle" value="" class="form-control" placeholder="Add video title" autocomplete="off">
  </label>
  <label for="videoUrl" class="mb-3">
    <input type="text" name="videoUrl" value="" class="form-control" placeholder="Add video url" autocomplete="off">
  </label>
  <i class="fileUploader__icon fa fa-film"></i>
  <div class="fileUploader__input">
    <input class="fileUploader__file" type="file" name="file-videos" id="file-videos" accept="image/x-png,image/gif,image/jpeg">
    <label for="file-videos">Click to add a video thumbnail</label>
    <p class="fileUploader__dragndrop"> or drag it here</p>
    <ul class="small">
      <li>File formats: </li>
      <li>File size: <span class="file-size-max"></span></li>
    </ul>
  </div>
  <div class="fileUploader__uploading">Uploading...</div>
  <div class="fileUploader__success">Complete</div>
  <div class="fileUploader__error">Error. <span></span></div>
  <a href="#" class="fileUploader__restart fa fa-redo-alt"></a>
  <div class="fileUploader-wrapper mt-3 text-right">
    <a href="#" class="btn btn-primary btn-submit">Submit</a>
  </div>
</div>

我在这里做了一个fiddle：https://jsfiddle.net/lharby/zygw72pr/

我有点理解创建这个函数并且只针对一个选择器，但我的目标是让它可重用，无论是 1 个输入还是 100 个输入都不重要。

TIA

Answer 1

问题是 class 的切换仅取决于集合中的最后一个输入，就像您在循环中编写的那样。

您可以使用 filter() 获取空的集合（如果有）并使用该集合长度来确定 class 切换。

将 toggleClass() 与它的第二个布尔参数一起使用也比在条件

中同时编写 addClass() 和 removeClass() 更简单

类似于：

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

Answer 2

过滤所有文本框。当没有空的时候，设置class可见。

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");
});

仅在填写所有输入字段后才启用元素。可重复使用的功能

Only enable element once all input fields are filled. Reusable function

javascript

jquery

function

toggle