Wie jQuery dynamische Seitenelemente steuert

Dieses Mal zeige ich Ihnen, wie jQuery dynamische Seitenelemente steuert. Was sind die Vorsichtsmaßnahmen für jQuery, um dynamische Seitenelemente zu steuern?

Hintergrund

Kürzlich ein kleines System erstellt, das das Hinzufügen, Löschen, Ändern und Überprüfen der Freunde des Benutzers auf der Seite erfordert. Es ist ursprünglich gar nicht so kompliziert und lässt sich relativ einfach in tabellarischer Form umsetzen.

Aber unter Berücksichtigung der Benutzererfahrung versuchen wir, beim ersten Hinzufügen keine Eingaben zu verwenden, daher zeigen wir alle Benutzer in Kategorien an und klicken dann zum Hinzufügen.

Die hinzugefügten Benutzer werden auch auf der Benutzeroberfläche angezeigt und zeigen die aktuellen Freunde des Benutzers an. Klicken Sie gleichzeitig auf den hinzugefügten Freund, um mit dem nächsten Geschäftsvorgang fortzufahren.

Der Löschvorgang ist natürlich derselbe wie auf dem Mobiltelefon. In der oberen rechten Ecke befindet sich ein rotes „x“, um ihn zu löschen.

Die endgültige Schnittstelle kann auch den Löschmodus verlassen und in den normalen Modus zurückkehren.

Funktionsbeschreibung

1 Benutzer hinzufügen: Klicken Sie, um einen Benutzer zur Liste hinzuzufügen und hinzuzufügen gleichzeitig onclickEreignis
2. Benutzer löschen: Klicken Sie auf den zu löschenden Freund
3. Wechseln Sie in den Löschmodus, schalten Sie onclick event
4 Modus: Schnittstelle ändern Für den Normalmodus klicken Sie auf „Klick-Ereignis“

Code

Zusammenfassung

In dieser Übung werden zwei Punkte gelernt: 1. Interaktion zwischen Ajax und dem Hintergrund; 2. JQuerys Attributsteuerung von Seitenelementen

//添加用户为自己常用好友
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);//恢复提示文字
}

Das Letzte, was ich sagen möchte, ist, dass Sie dies tun werden, wenn eine echte Nachfrage besteht viel üben und viel lernen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! Empfohlene Lektüre:

So konvertieren Sie automatisch Groß- und Kleinbuchstaben, wenn Jackson JSON-Strings analysiert

Nach erfolgreicher Ajax-Anfrage für Hintergrunddaten Wie man mit fehlender Reflexion umgeht

Verwenden von Registerkarten des jQuery EasyUI-Registerkartenfelds

Das obige ist der detaillierte Inhalt vonWie jQuery dynamische Seitenelemente steuert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!