So steuern Sie Seitenelemente in jQuery dynamisch

Dieser Artikel stellt hauptsächlich die Methode von jQuery zur dynamischen Steuerung von Seitenelementen vor. Er analysiert die jQuery-Ereignisreaktion und den dynamischen Betrieb von Seitenelementen in Form von Beispielen.

Dieser Artikel erklärt Beispiele Führen Sie jQuery ein, um die dynamische Steuerung von Seitenelementen zu implementieren. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hintergrund

Kürzlich ein kleines System erstellt, das die Freunde des Benutzers erfordert die auf der Seite angezeigt werden sollen. Führen Sie Ergänzungen, Löschungen, Änderungen und Prüfungen durch. Es ist ursprünglich gar nicht so kompliziert und lässt sich relativ einfach in Tabellenform umsetzen.

Unter Berücksichtigung der Benutzererfahrung fügen Sie jedoch zunächst so viel wie möglich ohne Eingabe hinzu, damit alle Benutzer in Kategorien angezeigt werden, und können sie dann mit einem Klick 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 in die Liste, um einen Benutzer hinzuzufügen und gleichzeitig ein Onclick-Ereignis hinzuzufügen
2. Einen Benutzer löschen: Klicken Sie auf den zu löschenden Freund
3. Wechseln Sie in den Löschmodus: Ändern Sie die Benutzeroberfläche in den Löschmodus, schalten Sie das Klickereignis ein
4. Zurück zum Normalmodus: Ändern Sie die Benutzeroberfläche in den Normalmodus, Einschaltklick-Ereignis

Bildanzeige

Code

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

Zusammenfassung

In dieser Übung wurden zwei Punkte gelernt:

1. Interaktion zwischen Ajax und dem Hintergrund ;
2. JQuery-Attributsteuerung von Seitenelementen

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die Tabellenfilterung mit Angular

Informationen dazu, wie Vue.js das Laden von unendlichem Scrollen implementiert

So implementieren Sie die Tabellenfilterung mit Angular

So implementieren Sie einen Taschenrechner mit JavaScript

So generieren Sie Zufall Treffer im JS Random Array

Das obige ist der detaillierte Inhalt vonSo steuern Sie Seitenelemente in jQuery dynamisch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!