天天看點

php關注好友和取消關注,jQuery實作點選關注和取消功能執行個體

該網絡語來源于網絡社群的“贊”功能。送出和收獲的贊的多少、贊的給予偏好等,在某種程度能反映出你是怎樣的人以及處于何種狀态。點贊的背後,反映出你自己。與之對應的便是取消功能。恰巧最近部落客在一款APP,其中一個版塊需要實作點贊和取消功能,經過思考決定用JQuery代碼實作它。

首先要引入JQuery插件

php關注好友和取消關注,jQuery實作點選關注和取消功能執行個體

其次,我們需要定義一個p,并給它一些樣式

php關注好友和取消關注,jQuery實作點選關注和取消功能執行個體
php關注好友和取消關注,jQuery實作點選關注和取消功能執行個體

然後就是JS代碼了,如下所示$(document).ready(function(){

var onOff=true;

var p=$(".p");

p.click(function(){

if (p.onOff) {

p.val("關注我");

p.css({"background":'#ccc'});

p.onOff = false;

} else {

p.css({"background":'red'});

p.val("已關注");

p.onOff = true;

}

});

});

實作效果如下

php關注好友和取消關注,jQuery實作點選關注和取消功能執行個體

可見JS代碼是好用的,同樣的,也可以實作圖檔切換效果如下圖

php關注好友和取消關注,jQuery實作點選關注和取消功能執行個體

其實作代碼如下

html:

css:注意圖檔路徑.p{

background-image: url(img/guanzhu.png);

width: 100px;height: 40px;background-size:80px;background-repeat: no-repeat;

}

JS代碼$(document).ready(function(){

var onOff=true;

var p=$(".p");

p.click(function(){

if (p.onOff) {

p.css({"background-image":'url(img/guanzhu.png)'});

p.onOff = false;

} else {

p.css({"background-image":'url(img/yiguanzhu.png)'});

p.onOff = true;

}

});

});

相關推薦: