僅在填充所有輸入字段后啟用元素。 可重復使用 function

Question

我正在嘗試編寫一個可重用的 function 循環遍歷所有輸入字段，如果有任何為空我想要另一個元素（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>

我在這里做了一個小提琴： https://jsfiddle.net/lharby/zygw72pr/

我有點理解創建這個 function 並且只針對一個選擇器，但我的目標是使其可重用，無論是 1 個輸入還是 100 個輸入都無關緊要。

TIA

Answer 1

過濾所有文本框。 當沒有空的時，將 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");
});
  

Answer 2

問題是 class 的切換僅取決於集合中的最后一個輸入，就像您在循環中編寫它的方式一樣。

您可以使用filter()來收集那些為空的（如果有的話）並使用該收集長度來確定 class 切換。

將toggleClass()與它的 boolean 第二個參數一起使用也比在條件條件中同時編寫addClass()和removeClass()更簡單

就像是：

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