JavaScript如何實現重置功能-js教程-PHP中文網

JavaScript如何實現重置功能

王林

發布： 2021-11-09 15:37:09

原創

2797 人瀏覽過

JavaScript實作重設功能的方法：【$(document).on('click','.dealFlowSelectedBox_bntBox_left',function(){ $('.dealFlowSelectedBox_...】。

JavaScript如何實現重置功能

本文操作環境：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(&#39;click&#39;,&#39;.dealFlowSelectedBox_bntBox_left&#39;,function(){
	$(&#39;.dealFlowSelectedBox_payment&#39;).removeClass(&#39;active&#39;);
	$(&#39;.dealFlowSelectedBox_certificate&#39;).removeClass(&#39;active&#39;);
	$(&#39;.dealFlowSelectedBox_payment&#39;).first().addClass(&#39;active&#39;);
	$(&#39;.dealFlowSelectedBox_certificate&#39;).first().addClass(&#39;active&#39;);
	$("input").val(&#39;&#39;);
})
</script>

登入後複製

推薦學習：JavaScript影片教學

以上是JavaScript如何實現重置功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！