使用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>
任何帮助,将不胜感激.
解决方法
首先,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更改的组合.