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);//恢复提示文字
}

概要 この演習で学んだことは 2 つあります:

1. Ajax とバックエンド間の対話

2. JQuery のページ要素の属性制御

上記は、私が皆さんのためにまとめたものです。 . 今後も皆様のお役に立てれば幸いです。

関連記事:

Angularを使用してテーブルフィルタリングを実装する方法

Vue.jsが無限スクロールロードを実装する方法について

Angularを使用してテーブルフィルタリングを実装する方法

JavaScriptを使用して電卓を実装する方法

JS でランダムにシャッフルされた配列を生成する方法

以上がjQueryでページ要素を動的に制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。