728x90 300x250 SMALL javaScript/jQuery153 [jQuery]목록 리스트 위로 아래로 이동 리스트 up down 버튼 스크립트 위 아래로 이동 $("#up").click(function(){ up(); }) $("#down").click(function(){ down(); }) function up(){ if($clickItem){ var $prev = $clickItem.prev(); if($prev){ $clickItem.insertBefore($prev); } }else{ alert("이름을 선택하세요"); } } function down(){ if($clickItem){ var $next = $clickItem.next(); if($next){ $clickItem.insertAfter($next); } }else{ alert("이름을 선택하세요"); } } 전체코드 추가 수정 삭제 위로.. 2023. 2. 9. [jQuery] 클릭한 요소 텍스트 수정 html 추가 수정 jQuery var $member=null; var $memberName=null; var $clickItem=null; $(document).ready(function(){ init(); initEvent(); }) function init(){ $member=$(".member"); $memberName=$("#memberName"); } function initEvent(){ $("#add").click(function(){ add(); }) $("#modify").click(function(){ //수정버튼을 클릭하면 modify함수 실행 modify(); }) $member.on("click","li",function(){ addClass($(this)); }) } funct.. 2023. 2. 6. [jQuery]아직 존재하지 않는 요소 이벤트 등록(라이브 방식) 라이브 방식 이벤트 등록 라이브 방식으로 이벤트를 등록하면 아직 존재 하지 않는 요소에 이벤트를 등록할 수 있다. 만약 click 이벤트를 사용하면 요소가 동적으로 추가 또는 삭제 될 경우 이벤트도 같이 등록 또는 제거를 해줘야 하기 때문에 번거롭다. 이럴때 사용할 수 있는 기능이 라이브 이벤트 등록이다. $대상.on("이벤트명","대상자식노드", 이벤트리스너(){ }) 위의 구문을 실행하면 $대상의 자식노드중에서 대상자식노드에만 이벤트를 등록한다는 뜻이된다. var $member=null; var $memberName=null; var $clickItem=null; $(document).ready(function(){ init(); initEvent(); }) function init(){ $membe.. 2023. 2. 5. [jQuery]선택한 리스트에 클래스 추가 html 추가 js var $member=null; var $memberName=null; var $clickItem=null; $(document).ready(function(){ init(); initEvent(); }) function init(){ $member=$(".member"); $memberName=$("#memberName"); } function initEvent(){ $("#add").click(function(){ add(); }) $member.on("click","li",function(){ //생성된 li를 클릭하기 때문에 on메서드 사용 addClass($(this)); }) } function addClass($item){ if($clickItem!=null){ $clic.. 2023. 2. 3. 이전 1 ··· 20 21 22 23 24 25 26 ··· 39 다음 728x90 반응형 LIST