广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
JavaScript实现重置功能的方法:【$(document).on('click','.dealFlowSelectedBox_bntBox_left',function(){ $('.dealFlowSelectedBox_...】。
本文操作环境:windows10系统、JavaScript 1.8.5、thinkpad t480电脑。
JavaScript实现重置功能的具体代码如下所示:
HTML代码:
<body><!--头部--><div class="mui-content"><div class="headerBox"><a href="javascript:history.go(-1);" class="fanhuiBnt"><img src="../img/dealFlow/fanhui.png" /></a>筛选条件</div><div class="dealFlowSelectedBox"><div class="dealFlowSelectedBox_title"><em></em><span>支付方式</span></div><div class="dealFlowSelectedBox_contBox"><a href="javascript:void(0);" class="dealFlowSelectedBox_payment active"><img src="../img/dealFlow/quanbu.png" />全部</a><a href="javascript:void(0);" class="dealFlowSelectedBox_payment "><img src="../img/signing/zhifubao.png" />支付宝收款</a><a href="javascript:void(0);" class="dealFlowSelectedBox_payment "><img src="../img/signing/weixin.png" />微信收款</a></div></div><div class="dealFlowSelectedBox_line"></div><div class="dealFlowSelectedBox"><div class="dealFlowSelectedBox_title"><em></em><span>证件资料</span></div><div class="dealFlowSelectedBox_contBox"><a href="javascript:void(0);" class="dealFlowSelectedBox_certificate active">全部</a><a href="javascript:void(0);" class="dealFlowSelectedBox_certificate ">收款成功</a><a href="javascript:void(0);" class="dealFlowSelectedBox_certificate ">退款成功</a><a href="javascript:void(0);" class="dealFlowSelectedBox_certificate ">收款失败</a></div></div><div class="dealFlowSelectedBox_line"></div><div class="dealFlowSelectedBox" style="padding: 0;"><div class="dealFlowSelectedBox_title" style="margin: 0 0.24rem;width: calc(100% - 0.24rem);"><em></em><span>交易时间</span></div><ul class="dealFlowSelectedBox_timeBox"><li><span>开始时间</span><input type="text" id="starDate" name="starDate" value="" placeholder="请选择开始日期" readonly="readonly" /><img src="../img/index/index_xyjt.png" /></li><li><span>结束时间</span><input type="text" id="endDate" name="endDate" value="" placeholder="请选择结束日期" readonly="readonly" /><img src="../img/index/index_xyjt.png" /></li></ul></div><div class="dealFlowSelectedBox_bntBox"><a href="javascript:void(0);" class="dealFlowSelectedBox_bntBox_left">重置</a><a href="javascript:void(0);" class="dealFlowSelectedBox_bntBox_right">确定</a></div></div> </body>登录后复制
JS代码:
<script type="text/javascript">$(document).on('click','.dealFlowSelectedBox_bntBox_left',function(){$('.dealFlowSelectedBox_payment').removeClass('active');$('.dealFlowSelectedBox_certificate').removeClass('active');$('.dealFlowSelectedBox_payment').first().addClass('active');$('.dealFlowSelectedBox_certificate').first().addClass('active');$("input").val('');})</script>登录后复制
推荐学习:JavaScript视频教程
以上就是JavaScript如何实现重置功能的详细内容,更多请关注9543建站博客其它相关文章!
发表评论