jQuery如何實(shí)現(xiàn)點(diǎn)贊加1

這篇文章主要講解了“jQuery如何實(shí)現(xiàn)點(diǎn)贊加1”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“jQuery如何實(shí)現(xiàn)點(diǎn)贊加1”吧！

jQuery實(shí)現(xiàn)點(diǎn)贊加1的方法：1、導(dǎo)入jquery；2、設(shè)置HTML和CSS代碼；3、通過代碼“$(".liker").on("click",function(){...}”方法實(shí)現(xiàn)點(diǎn)贊加1效果即可。

本文操作環(huán)境：Windows7系統(tǒng)、jquery-3.3.1版、DELL G3電腦

jQuery怎么實(shí)現(xiàn)點(diǎn)贊加1？

Jquery一個(gè)簡(jiǎn)單的點(diǎn)贊效果，實(shí)現(xiàn)點(diǎn)贊數(shù)+1

1、導(dǎo)入JS

<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>

2、CSS代碼

a{
	text-decoration:none ;
	color: #999999;}.red{
	color: red;}

3、HTML代碼

<p>王思蔥竟然也是舔狗？<a href="#"><span class="liker">?999</span></a></p><p>震驚，一名科學(xué)家發(fā)現(xiàn)每刷一分鐘抖音，人的生命就會(huì)減少60秒！<a href="#"><span class="liker">?520</span></a></p>

4、JS代碼

$(function(){
	//點(diǎn)贊
	$(".liker").on("click",function(){
		// 判斷是否已經(jīng)點(diǎn)贊過
		if($(this).hasClass("red")){
			return
		}
		//添加樣式 并且數(shù)字+1
		$(this).addClass("red")
		var num=$(this).html().substring(1)
		num++
		$(this).html("?"+num)
		//ajax更新數(shù)據(jù)
	})})

運(yùn)行…

單擊小愛心后

當(dāng)然，這里沒有寫后臺(tái)交互的代碼

感謝各位的閱讀，以上就是“jQuery如何實(shí)現(xiàn)點(diǎn)贊加1”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)jQuery如何實(shí)現(xiàn)點(diǎn)贊加1這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！