본 글에서는 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);//恢复提示文字
}
Summary 이 연습에서 배운 두 가지가 있습니다.
1. Ajax와 백엔드 간의 상호 작용
2 페이지 요소의 속성 제어
위 내용은 제가 모두를 위해 작성한 것입니다. . 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
Angular를 사용하여 테이블 필터링을 구현하는 방법Vue.js를 사용하여 무한 스크롤 로딩을 구현하는 방법Angular를 사용하여 테이블 필터링을 구현하는 방법계산기 구현 방법 JavaScript 사용JS에서 임의의 섞인 배열을 생성하는 방법위 내용은 jQuery에서 페이지 요소를 동적으로 제어하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!