집 >웹 프론트엔드 >JS 튜토리얼 >jQuery에서 페이지 요소를 동적으로 제어하는 방법

jQuery에서 페이지 요소를 동적으로 제어하는 방법

亚连원래의: 2018-06-19 16:32:161463검색

본 글에서는 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: "{&#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);//恢复提示文字
}

Summary 이 연습에서 배운 두 가지가 있습니다.

1. Ajax와 백엔드 간의 상호 작용

2 페이지 요소의 속성 제어

위 내용은 제가 모두를 위해 작성한 것입니다. . 앞으로 모든 사람에게 도움이 되기를 바랍니다.

jQuery에서 페이지 요소를 동적으로 제어하는 ​​방법

관련 기사

jQuery에서 페이지 요소를 동적으로 제어하는 방법