jQuery가 동적 페이지 요소를 제어하는 ​​방법

이번에는 jQuery가 동적 페이지 요소를 제어하는 ​​방법을 보여 드리겠습니다. jQuery가 동적 페이지 요소를 제어하는 ​​데 있어 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

Background

최근 페이지에서 사용자의 친구를 추가, 삭제, 수정 및 확인해야 하는 소규모 시스템을 만들었습니다. 원래는 그렇게 복잡하지 않으며, 테이블 형식으로 비교적 쉽게 구현할 수 있습니다.

단, 사용자 경험을 고려하여 먼저 추가할 때 입력을 사용하지 않으려고 하여 모든 사용자를 카테고리별로 표시한 후 클릭하여 추가합니다.

추가된 사용자도 인터페이스에 표시되어 사용자의 현재 친구를 보여줍니다. 동시에 추가된 친구를 클릭하면 다음 사업을 진행할 수 있습니다.

물론, 삭제 방법은 휴대폰에서와 동일합니다. 삭제하려면 오른쪽 상단에 빨간색 "x"가 있습니다.

마지막 인터페이스에서도 삭제 모드를 종료하고 일반 모드로 돌아갈 수 있습니다.

기능 설명

1. 사용자 추가: 목록에 사용자를 추가하려면 클릭하고 onclick 이벤트
를 추가하세요. 2. 사용자 삭제: 삭제할 친구를 클릭하세요
3. 삭제 모드: 인터페이스를 삭제 모드로 변경, onclick 이벤트 전환
4. 일반 모드 복원: 인터페이스를 일반 모드로 변경, onclick 이벤트 전환

사진 표시

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: "{'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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

jackson이 json 문자열을 구문 분석할 때 대문자와 소문자를 자동으로 변환하는 방법

백그라운드 데이터에 대한 Ajax 요청이 성공한 후 반영이 없는 경우 수행할 작업

탭 사용 jQuery EasyUI 탭 패널

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