jquery獲取并修改觸發(fā)事件的DOM元素示例【基于target 屬性】
本文實例講述了jquery獲取并修改觸發(fā)事件的DOM元素。分享給大家供大家參考,具體如下:
需求
當(dāng)點擊關(guān)注后,改變按鈕樣式并顯示取消關(guān)注,如圖


實現(xiàn)
利用jQuery的 target獲取到觸發(fā)該事件的dom,然后修改它
target 屬性

代碼:
HTML
<div class="people-desc">
<div class="people-name">{$vo['nickname']}</div>
<div class="people-state" οnclick="toFollow({$vo['follow_user_id']})">+關(guān)注</div>
</div>
function toFollow(follow_user_id) {
console.log(event);
var toUrl = "{:url('index/follow/toFollow')}";
var postData = {follow_user_id:follow_user_id};
$.post(
toUrl,
postData,
function (result) {
if(result.code == 0){
target.outerHTML = "<div class=\"people-state active\" οnclick=\"toFollow("+follow_user_id+")\">取消關(guān)注</div>";
}else{
//失敗
layer.msg(result.msg);
}
},"JSON");
}
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
jQuery固定浮動側(cè)邊欄實現(xiàn)思路及代碼
如果頁面比較高,當(dāng)滾動條拖到頁面的下面的時候,側(cè)邊欄會出現(xiàn)一個固定跟隨瀏覽器的DIV框,下面將思路及具體實現(xiàn)與大家分享下2014-09-09
jQuery實現(xiàn)的一個tab切換效果內(nèi)部還嵌有切換
這篇文章主要介紹了jQuery實現(xiàn)的一個tab切換效果,它的特色是內(nèi)部還嵌有切換,需要的朋友可以參考下2014-08-08
jQuery實現(xiàn)的簡潔下拉菜單導(dǎo)航效果代碼
這篇文章主要介紹了jQuery實現(xiàn)的簡潔下拉菜單導(dǎo)航效果代碼,通過簡單的自定義函數(shù)實現(xiàn)頁面樣式切換功能,非常簡潔實用,需要的朋友可以參考下2015-08-08
jQuery.Callbacks()回調(diào)函數(shù)隊列用法詳解
這篇文章主要介紹了jQuery.Callbacks()回調(diào)函數(shù)隊列用法,結(jié)合實例形式詳細分析了jQuery.Callbacks()回調(diào)函數(shù)隊列的功能、控制標志含義與相關(guān)注意事項,需要的朋友可以參考下2016-06-06

