So implementieren Sie die Reset-Funktion in JavaScript-js-Tutorial-php.cn

So implementieren Sie die Reset-Funktion in JavaScript

王林

Freigeben： 2021-11-09 15:37:09

Original

2758 Leute haben es durchsucht

JavaScript-Methode zum Implementieren der Reset-Funktion: [$(document).on('click','.dealFlowSelectedBox_bntBox_left',function(){ $('.dealFlowSelectedBox_...].

So implementieren Sie die Reset-Funktion in JavaScript

Die Betriebsumgebung dieses Artikels: Windows10-System, JavaScript 1.8.5, Thinkpad T480-Computer

Der spezifische Code für JavaScript zum Implementieren der Reset-Funktion lautet wie folgt:

HTML-Code:

<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>

Nach dem Login kopieren

JS-Code:

<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>

Nach dem Login kopieren

Empfohlenes Lernen : JavaScript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Reset-Funktion in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!