jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了javascript – 如果使用jQuery不为空,如何切换输入类?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
使用Bootstrap 4.

我有四个文本输入,如果任何文本输入包含任何值,我想添加一个类到一个按钮.

单击按钮时,我想清除输入值,并从按钮中删除该类.

我有一半工作(点击按钮成功清除所有输入).

我的代码如下;

$(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.

任何帮助,将不胜感激.

解决方法

首先,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>

还要注意使用输入而不是keyup更改的组合.

大佬总结

以上是大佬教程为你收集整理的javascript – 如果使用jQuery不为空,如何切换输入类?全部内容,希望文章能够帮你解决javascript – 如果使用jQuery不为空,如何切换输入类?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。