on
제이쿼리 - 응용(댓글, 답글, 리스트 옮기기)
제이쿼리 - 응용(댓글, 답글, 리스트 옮기기)
Insert title here *{ margin: 0; padding: 0; box-sizing: border-box; } body { font-size: 14px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; } a { color: #000; text-decoration: none; cursor: pointer; } a:active, a:hover { text-decoration: underline; color: #F28011; } .btn { color: #333; border: 1px solid #333; background-color: #fff; padding: 4px 10px; border-radius: 4px; font-weight: 500; cursor:pointer; font-size: 14px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; vertical-align: baseline; /* 부모 요소의 기준선에 맞춤 */ } .btn:hover, .btn:active, .btn:focus { background-color: #e6e6e6; border-color: #adadad; color:#333; } .btn[disabled], fieldset[disabled] .btn { pointer-events: none; cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .65; } .boxTF { border: 1px solid #999; padding: 5px 5px; background-color: #fff; border-radius: 4px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; vertical-align: baseline; } .selectField { border: 1px solid #999; padding: 4px 5px; border-radius: 4px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; vertical-align: baseline; } .boxTA { border:1px solid #999; height:150px; padding:3px 5px; border-radius:4px; background-color:#fff; resize : none; vertical-align: baseline; } textarea:focus, input:focus { outline: none; } $(function() { $("body").on("click",".btnSendReply",function(){ var num = "10"; var $tb = $(this).closest("table"); var content = $tb.find("textarea").val().trim(); if(! content){ $tb.find("textarea").focus(); return false; } content = encodeURIComponent(content); var query = "num="+num+"&content="+content; alert(query); }); }); // 답글버튼 $(function() { $("body").on("click",".btnReplyAnswerLayout",function(){ var $tr = $(this).closest("tr").next(); var replyNum = $(this).attr("data-replyNum"); var isVisible = $tr.is(":visible"); if(isVisible){ $tr.hide(); } else { $tr.show(); } }); }); // 답글 등록버튼 $(function() { $("body").on("click",".btnSendReplyAnswer",function(){ var num = "10"; var replyNum = $(this).attr("data-replyNum"); var $td = $(this).closest("td"); var content = $td.find("textarea").val().trim(); if(! content){ $td.find("textarea").focus(); return false; } content = encodeURIComponent(content); var query = "num="+num+"&content="+content+"&answer="+replyNum; alert(query); }); }); 댓글쓰기 - 타인을 비방하거나 개인정보를 유출하는 글의 게시를 삼가 주세요. 댓글 등록 댓글 50개 [댓글 목록, 1/10 페이지] 홍길동 2017-11-10 | 삭제 댓글 내용 입니다. 답글 0 좋아요 5 싫어요 2 └ 답글 등록 가가가 2017-10-10 | 삭제 안녕 하세요. 답글 1 좋아요 7 싫어요 1 └ 후후후 2017-11-22 | 삭제 답글 입니다. └ 답글 등록 나나나 2017-10-08 | 삭제 자바를 공부하자. 답글 0 좋아요 3 싫어요 0 └ 답글 등록 1 2 3
- 답글 버튼을 숨기거나 보이게 하는 기능
- 답글 등록 기능
- 댓글 등록 기능
답글 버튼
- 바디 영역에서 클래스 btnReplyAnswerLayout가 클릭 되면 함수가 실행 된다.
- 실행되는 함수는 클릭된 놈의 가장 가까운 tr을 찾고 그 다음(next)을 변수로 지정
- 이 클래스의 속성을 변수 하나에 넣는다.
- 답글 버튼이 보이는 상태인지 안보이는 상태인지 확인하기 위해서 보이는 상태인 :visible을 if로 확인
- if 문으로 보여지고 있으면 숨기고 숨겨져 있으면 보이게 한다.
답글 등록 버튼과 댓글 등록 기능은
입력 받은 내용의 값을 trim()로 모든 공백을 제거하고
이걸 인코딩 해준다. => encodeURIComponent(content);
그리고 이걸 쿼리로 써먹기 위해 변수 하나에 쿼리 형식으로 저장을 한다.
var query = "num="+num+"&content;="+content+"&answer;="+replyNum;
Insert title here *{ margin: 0; padding: 0; box-sizing: border-box; } body { font-size: 14px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; } a { color: #000; text-decoration: none; cursor: pointer; } a:active, a:hover { text-decoration: underline; color: #F28011; } .btn { color: #333; border: 1px solid #333; background-color: #fff; padding: 4px 10px; border-radius: 4px; font-weight: 500; cursor:pointer; font-size: 14px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; vertical-align: baseline; /* 부모 요소의 기준선에 맞춤 */ } .btn:hover, .btn:active, .btn:focus { background-color: #e6e6e6; border-color: #adadad; color:#333; } .btn[disabled], fieldset[disabled] .btn { pointer-events: none; cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .65; } .boxTF { border: 1px solid #999; padding: 5px 5px; background-color: #fff; border-radius: 4px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; vertical-align: baseline; } .selectField { border: 1px solid #999; padding: 4px 5px; border-radius: 4px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; vertical-align: baseline; } .boxTA { border:1px solid #999; height:150px; padding:3px 5px; border-radius:4px; background-color:#fff; resize : none; vertical-align: baseline; } textarea:focus, input:focus { outline: none; } .title { width:100%; font-size: 16px; font-weight: bold; padding: 13px 0; } .container { width: 400px; margin: 30px auto; } .note-table { width: 100%; border-spacing: 0; border-collapse: collapse; } .note-table th, .note-table td { padding: 5px 0; } .left { text-align: left; padding-left: 7px; } .center { text-align: center; } .right { text-align: right; padding-right: 7px; } $(function() { $("#itemLeft").append(""); $("#itemLeft").append(""); $("#itemLeft").append(""); $("#itemLeft").append(""); $("#itemLeft").append(""); $("#itemLeft").append(""); }); $(function() { $("#btnRight").click(function() { $("#itemLeft option:selected").each(function() { $(this).appendTo("#itemRight"); }); }); $("#btnAllRight").click(function() { $("#itemLeft option").each(function() { $(this).appendTo("#itemRight"); }); }); $("#btnLeft").click(function() { $("#itemRight option:selected").each(function() { $(this).appendTo("#itemLeft"); }); }); $("#btnAllLeft").click(function() { $("#itemRight option").each(function() { $(this).appendTo("#itemLeft"); }); }); }); function sendOk() { if($("#itemRight option").length===0){ alert("받는 사람을 먼저 추가하세요"); return; } $("#itemRight option").prop("selected",true); alert("ok"); } | 쪽지 보내기 친구목록 받는사람 > >> < << 메시지 쪽지보내기
제이쿼리 함수 부분
$(function() { $("#itemLeft").append("이이이"); $("#itemLeft").append("김김김"); $("#itemLeft").append("노노노"); $("#itemLeft").append("홍홍홍"); $("#itemLeft").append("마마마"); $("#itemLeft").append("하하하"); }); $(function() { $("#btnRight").click(function() { $("#itemLeft option:selected").each(function() { $(this).appendTo("#itemRight"); }); }); $("#btnAllRight").click(function() { $("#itemLeft option").each(function() { $(this).appendTo("#itemRight"); }); }); $("#btnLeft").click(function() { $("#itemRight option:selected").each(function() { $(this).appendTo("#itemLeft"); }); }); $("#btnAllLeft").click(function() { $("#itemRight option").each(function() { $(this).appendTo("#itemLeft"); }); }); }); function sendOk() { if($("#itemRight option").length===0){ alert("받는 사람을 먼저 추가하세요"); return; } $("#itemRight option").prop("selected",true); alert("ok"); }
처음 로드되면 제이쿼리를 이용해서 목록을 추가함
그리고 리스트 왔다갔다 하는거는 append() 메소드를 사용해도 되고 appendTo()메소드를 사용해도 된다.
from http://heidong.tistory.com/141 by ccl(A) rewrite - 2021-11-01 20:02:13