首頁 web前端 js教程 JavaScript如何實現重置功能

JavaScript如何實現重置功能

Nov 09, 2021 pm 03:37 PM
javascript 重置

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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1665
14
CakePHP 教程
1424
52
Laravel 教程
1322
25
PHP教程
1270
29
C# 教程
1250
24
WiFi通話在iPhone上不起作用:修復 WiFi通話在iPhone上不起作用:修復 Jun 03, 2024 am 11:16 AM

無法在iPhone上啟用Wi-Fi通話?通話品質得到改善,您甚至可以從蜂窩網路不那麼強大的遠端位置進行通訊。 Wi-Fi通話也提高了標準通話和視訊通話品質。因此,如果您無法使用手機上的Wi-Fi通話,這些解決方案可能會幫助您解決問題。修復1–手動啟用Wi-Fi通話您必須在iPhone設定中啟用Wi-Fi通話功能。步驟1–為此,您必須打開“設定”。步驟2–接下來,只需向下找到並開啟「電話」設定即可步驟3–在電話設定中,向下捲動並開啟「Wi-Fi通話」設定。步驟4–在Wi-Fi通話頁面中,將「此iPh

如何使用WebSocket和JavaScript實現線上語音辨識系統 如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

抖音如何重置推薦內容?它推薦內容怎麼設定呢? 抖音如何重置推薦內容?它推薦內容怎麼設定呢? Mar 27, 2024 pm 07:30 PM

抖音,這個全球最受歡迎的短影片平台,讓每個人都能成為創作者,分享生活中的點點滴滴。有時候我們可能會對抖音推薦的內容感到厭倦,希望能夠重置推薦內容,讓平台重新評估並推送更適合自己的內容。那麼,抖音如何重置推薦內容呢?本文將圍繞此問題進行詳細解答。一、抖音如何重置推薦內容?抖音根據用戶的觀看歷史、互動行為和興趣偏好等數據進行個人化推薦。目前,抖音平台並沒有直接提供重置推薦內容的選項。但是,用戶可以採取一些方法來嘗試重置推薦內容,例如清除觀看歷史記錄、取消追蹤不感興趣的內容創作者、多樣化觀看內容以改變推

如何利用JavaScript和WebSocket實現即時線上點餐系統 如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

解決win11重置問題的方法 解決win11重置問題的方法 Jan 05, 2024 am 09:24 AM

win11推出之後很多的用戶都直接進行了更新,然而更新之後很多的用戶都出現了重置失敗的情況也不知道該怎麼去解決,所以今天我們就給大家帶來了win11重置失敗解決方法,快來看看怎麼操作吧。 win11重置失敗怎麼解決1、先點選左下角開始,點選設置,然後選擇更新和安全性。 2.點選左側的恢復按鍵,點選重設此電腦選項下面的開始。 3、之後就可以選擇一個選項。 4.最後等待安裝win11系統即可解決。 5.用戶們也可以直接在本站下載win11系統解決問題。

如何使用WebSocket和JavaScript實現線上預約系統 如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript與WebSocket:打造高效率的即時天氣預報系統 JavaScript與WebSocket:打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

See all articles