Comment contrôler dynamiquement les éléments de la page dans jQuery

Cet article présente principalement la méthode jQuery de contrôle dynamique des éléments de page. Il analyse la réponse aux événements jQuery et le fonctionnement dynamique des éléments de page sous forme d'exemples. Les amis dans le besoin peuvent se référer à ce qui suit

Les exemples de ceci. l'article est expliqué Présentez jQuery pour implémenter le contrôle dynamique des éléments de la page. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Contexte

Récemment créé un petit système, qui nécessite les amis de l'utilisateur à afficher sur la page Effectuer des ajouts, suppressions, modifications et vérifications. Ce n’est pas si compliqué à l’origine et peut être implémenté relativement facilement sous forme de tableau.

Cependant, compte tenu de l'expérience utilisateur, nous essayons de ne pas utiliser de saisie lors de l'ajout en premier, nous affichons donc tous les utilisateurs dans des catégories, puis cliquons pour ajouter.

Les utilisateurs ajoutés sont également affichés sur l'interface, montrant les amis actuels de l'utilisateur. En même temps, cliquez sur l'ami ajouté pour procéder à l'opération commerciale suivante.

Bien sûr, l'opération de suppression est la même que sur le téléphone portable. Il y a un "x" rouge dans le coin supérieur droit. Cliquez sur l'ami pour le supprimer.

L'interface finale peut également sortir du mode suppression et revenir au mode normal.

Description de la fonction

1. Ajouter un utilisateur : Cliquez dans la liste pour ajouter un utilisateur et ajouter un événement onclick en même temps <.>2. Supprimer un utilisateur : Cliquez sur l'ami à supprimer
3. Entrez en mode suppression : changez l'interface en mode suppression, activez l'événement onclick
4. Revenir en mode normal : changez l'interface en mode normal, activer l'événement click

Affichage d'image

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

Résumé

Il y a deux points appris dans cet exercice :

1 L'interaction entre Ajax. et l'arrière-plan ;

2 . Contrôle des attributs de JQuery pour les éléments de la page

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment implémenter le filtrage de table à l'aide d'Angular

À propos de la façon dont Vue.js implémente le chargement par défilement infini

Comment implémenter le filtrage de tableaux à l'aide d'Angular

Comment implémenter une calculatrice à l'aide de JavaScript

Comment générer des données aléatoires hits dans le tableau aléatoire JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!