在jQuery中如何實現動態控制頁面元素

這篇文章主要介紹了jQuery實現動態控制頁面元素的方法,結合實例形式分析了jQuery事件響應及頁面元素動態操作相關實現技巧,需要的朋友可以參考下

本文實例講述了jQuery實作動態控制頁面元素的方法。分享給大家供大家參考，具體如下：

背景

#最近做了一個小系統，其中需要在頁面對使用者的好友進行增刪改查。本來沒有那麼複雜，用表格形式就可以相對容易的實現。

但是考慮到使用者的體驗度，先加入盡量不想用輸入，就採用將所有使用者分類顯示，然後點擊即可新增。

新增的使用者同時在介面顯示，顯示出使用者目前的好友。同時點選已經新增好的好友可進行下一部的業務操作。

當然，刪除的操作是仿照手機端那樣，右上角有一個紅色的“x”，點擊該好友即可刪除。

最後介面還能退出刪除的模式，恢復正常的模式。

功能說明

1. 新增用戶：在清單中點選即新增用戶，同時新增onclick事件
2. 刪除用戶：點選該好友即可刪除
3. 進入刪除模式：將介面改為刪除模式，切換onclick事件
4.恢復正常模式：將介面改為正常模式，切換onclick事件

圖片展示

#

//添加用户为自己常用好友
function Add(e) {
  var friend_id = e.id;
  var name = $("#" + friend_id).html();
  //将要插入页面的好友html代码
  var content = "<p id=\"friend" + friend_id + "\" class=\"case-item\" onclick=\"" + game_type + "(this)\"><p class=\"ih-item circle effect1\"><a href=\"#\"><img class=\"img_wrong\" src=\"image/wrong.png\" style=\"float: right; width: 15px; height: 15px;display:none\" /><p class=\"spinner\"></p><p class=\"img\"><h3 id=\"" + friend_id + "\">" + name + "</h3></p><p class=\"info\"><p class=\"info-back\"><h3 class=\"info-word\">" + info_word + "</h3></p></p></a></p></p>";
  //向数据库添加，通过结果来确定界面显示
  $.ajax({
   url: "userlist.aspx/AddFriend",
   data: "{&#39;username&#39;:&#39;" + $(&#39;#username&#39;).text() + "&#39;,&#39;friend_id&#39;:&#39;" + friend_id + "&#39;}",
   type: &#39;Post&#39;,
   contentType: "application/json; charset=utf-8",
   dataType: "json",
   success: function (result) {
    if (result.d == "true") {
     $(".case-content").append(content);//数据库添加成功，插入html代码
    }
    else {
     alert(result.d);
    }
   },
   error: function (err) {
    alert("未知错误");
   }
  });
}
//删除好友
function Delete(e) {
  var friend_id = e.id;
  $.ajax({
   url: "userlist.aspx/DeleteFriend",
   data: "{&#39;username&#39;:&#39;" + $(&#39;#username&#39;).text() + "&#39;,&#39;friend_id&#39;:&#39;" + friend_id + "&#39;}",
   type: &#39;Post&#39;,
   contentType: "application/json; charset=utf-8",
   dataType: "json",
   success: function (result) {
    if (result.d == true) {
     $("#" + friend_id).remove();//在界面移除好友
    }
    if (result.d == false) { alert("删除失败"); }
   },
   error: function (err) {
    alert("未知错误");
   }
  });
}
//重置好友-切换到删除模式
function ChangeToDelete() {
  $(".case-item").removeAttr("onclick");//删除onclick事件
  $(".case-item").attr("onclick", "Delete(this);");//添加新的onclick事件
  $(".img_wrong").css("display", "block");//使删除图标可见
  $(".info-word").html("删除");//改变提示文字
}
//关闭重置-切换到正常模式
function ChangeToNormal() {
  $(".case-item").removeAttr("onclick");//删除onclick事件
  $(".case-item").attr("onclick", "");//添加新的onclick事件
  $(".img_wrong").css("display", "none");//使删除图标不可见
  $(".info-word").html(info_back);//恢复提示文字
}

小結

這次練習學到的內容有兩點：

1. Ajax和後台的互動；
2. JQuery對頁面元素的屬性控制

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

使用Angular如何實現表格過濾

有關Vue.js如何實現無限滾動載入

使用Angular如何實現表格過濾

使用JavaScript如何實現計算器

在JS中如何產生隨機打亂數組

以上是在jQuery中如何實現動態控制頁面元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！