今回は、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: "{'username':'" + $('#username').text() + "','friend_id':'" + friend_id + "'}", type: 'Post', 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: "{'username':'" + $('#username').text() + "','friend_id':'" + friend_id + "'}", type: 'Post', 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. 最後に言いたいのは、それはあなたを駆り立てる真のニーズです。そこにいるとき、あなたはたくさん練習し、多くを学ぶでしょう。
ジャクソンがJSON文字列を解析するときに大文字と小文字を自動的に変換する方法
バックグラウンドデータのAjaxリクエストが成功した後に反映されない場合の対処方法
以上がjQuery による動的ページ要素の制御方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。