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

이 연습에서 배운 두 가지 사항은 다음과 같습니다.

1. Ajax와 배경 간의 상호 작용
2. JQuery의 페이지 요소 속성 제어

이 기사의 사례를 읽으신 후 이 방법을 익히셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP에 대한 다른 관련 기사를 참조하세요. 중국사이트!

추천 자료:

jQuery 작업 목록에 새 요소를 동적으로 추가하는 군인

하위 요소에 할당 단계를 추가하는 jQuery에 대한 자세한 설명

jQuery Magnify 플러그인 사용에 대한 자세한 설명

위 내용은 jQuery가 페이지 요소를 동적으로 제어하는 ​​방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!