JavaScript如何实现重置功能

广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

JavaScript如何实现重置功能

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建站博客其它相关文章!

广告:SSL证书一年128.66元起,点击购买~~~

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。

作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:meta标签作用是什么
下一篇:Vue3中的路由函数详解:实现SPA应用的路由跳转

发表评论

关闭广告
关闭广告