집 > 기사 > 웹 프론트엔드 > JavaScript에서 재설정 기능을 구현하는 방법

JavaScript에서 재설정 기능을 구현하는 방법

王林원래의: 2021-11-09 15:37:092747검색

재설정 기능을 구현하는 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(&#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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript html JS function

성명：

이전 기사：JavaScript에서 곱셈과 덧셈을 구현하는 방법다음 기사：JavaScript에서 곱셈과 덧셈을 구현하는 방법