如果 jQuery 不为空，如何切换输入类？

Question

使用 Bootstrap 4。

我有四个文本输入，如果 any 的文本输入包含 any 值，我想为按钮添加一个类。

单击按钮时，我想清除输入值，并从按钮中删除类。

我有一半在工作（点击按钮成功清除所有输入）。

我的代码如下；

 $(document).ready(function() {
      $("#filterRecords input").on("keyup change", function() {
        $("#filterRecords input").each(function() {
          var element = $(this);
          if (element.val().length > 0) {
            $('#resetFilter').addClass('btn-outline-primary');
          }
        });
      });
      $('#resetFilter').click(function() {
        $('input[type=text]').val('').change();
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row filterRecords">
      <div class="input-group col-xs-6 col-sm-6 col-md-3 mb-3">
        <input type="text" id="searchName" class="form-control" placeholder="Search Name">
      </div>
      <div class="input-group col-sm-6 col-md-3 mb-3">
        <input type="text" id="searchLang" class="form-control" placeholder="Search Language">
      </div>
      <div class="input-group col-sm-6 col-md-3 mb-3">
        <input type="text" id="yearMin" class="form-control start" placeholder="Search Start Year">
      </div>
      <div class="input-group col-sm-6 col-md-3 mb-3">
        <input type="text" id="yearMax" class="form-control end" placeholder="Search End Year">
      </div>
    </div>
    <div class="row justify-content-md-center">
      <div class="col-md-auto">
        <button class="btn btn-sm btn-default" type="button" id="resetFilter">Reset Filters</button>
        <hr>
      </div>
    </div>

Fiddle link.

任何帮助将不胜感激。

Answer 1

首先，filterRecords 是一个类，而不是 id，所以你的选择器不正确。

除此之外，您的逻辑的问题是它只会在输入值更改时添加类。当没有输入值输入时，您还需要有一些逻辑来删除它。

您可以通过使用 toggleClass() 以及基于填充输入数量的布尔值来做到这一点，如下所示：

$(document).ready(function() {
  var $inputs = $(".filterRecords input");      
  $inputs.on("input", function() {
    var $filled = $inputs.filter(function() { return this.value.trim().length > 0; });
    $('#resetFilter').toggleClass('btn-outline-primary', $filled.length > 0);
  });
  
  $('#resetFilter').click(function() {
    $inputs.val('').trigger('input');
  });
});

.btn-outline-primary {
  color: #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row filterRecords">
  <div class="input-group col-xs-6 col-sm-6 col-md-3 mb-3">
    <input type="text" id="searchName" class="form-control" placeholder="Search Name">
  </div>
  <div class="input-group col-sm-6 col-md-3 mb-3">
    <input type="text" id="searchLang" class="form-control" placeholder="Search Language">
  </div>
  <div class="input-group col-sm-6 col-md-3 mb-3">
    <input type="text" id="yearMin" class="form-control start" placeholder="Search Start Year">
  </div>
  <div class="input-group col-sm-6 col-md-3 mb-3">
    <input type="text" id="yearMax" class="form-control end" placeholder="Search End Year">
  </div>
</div>
<div class="row justify-content-md-center">
  <div class="col-md-auto">
    <button class="btn btn-sm btn-default" type="button" id="resetFilter">Reset Filters</button>
    <hr>
  </div>
</div>

还要注意input 的使用，而不是keyup change 的组合。

Answer 2

这样

$(document).ready(function() {
  $("#filterRecords input").on("keyup change", function() {
    $("#filterRecords input").each(function() {
      var element = $(this);
      if (element.val().length > 0) {
        $('#resetFilter').addClass('btn-outline-primary');
      }
    });
  });
  $('#resetFilter').click(function() {
    $("#filterRecords**")[0].reset();
    $(this).removeClass('btn-outline-primary');
  });
});