여태까지 배웠던 노드에서 할 수 있는 이벤트를 활용하여 실습을 해본다.
1. 처음에 입력 항목을 초기화해야한다.
예를 들어 ul.menu나 ul.menu li, input text에 id : #menuName를 초기화 한다.
2. 그리고 각각의 함수를 작성한다. 아무거나 변경할 수 없기때문에 처음에 해당 노드를 선택하는 이벤트가 존재해야한다. 노드를 선택하는 함수를 작성한다.
setfunction setSelectMenu(menuObj) {
var $select = $(menuObj);
// 이전에 선택한 메뉴에 대해 "select" 클래스 제거
if ($selectedMenu != null) {
$selectedMenu.removeClass("select");
}
// 신규로 선택한 메뉴에 대해 "select" 클래스 추가
$select.addClass("select");
$selectedMenu = $select;
}
3. 선택함수를 이용하여 각각의 이벤트를 작성한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>node operation</title>
<script src="../js/jquery-3.5.1.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
body {
font-size: 9pt;
font-family: "굴림";
}
ul.menu {
padding: 10px;
list-style: none;
border: 1px #000 solid;
}
ul.menu li {
border: 2px #eeeeee solid;
margin: 10px;
}
li.select {
background-color: #ccc;
}
</style>
<script>
var $menu = null;
var $menuItem = null;
var $menuName = null;
var $selectedMenu = null;
$(document).ready(function () {
initialize();
$("#add").click(function () {
addMenu();
});
$("#update").click(function () {
updateMenu();
});
$("#remove").click(function () {
removeMenu();
});
$("#up").click(function () {
moveUpMenu();
});
$("#down").click(function () {
moveDownMenu();
});
});
// 입력 항목 초기화
function initialize() {
$menu = $("ul.menu");
$menuItem = $("ul.menu li");
$menuName = $("#menuName");
}
function setSelectMenu(menuObj) {
var $select = $(menuObj);
// 이전에 선택한 메뉴에 대해 "select" 클래스 제거
if ($selectedMenu != null) {
$selectedMenu.removeClass("select");
}
// 신규로 선택한 메뉴에 대해 "select" 클래스 추가
$select.addClass("select");
$selectedMenu = $select;
}
function addMenu() {
var menuName = $menuName.val();
var $newMenuItem = $("<li>"+menuName+"</li>");
$menu.append($newMenuItem);
$newMenuItem.click(function(){
console.log("클릭 메뉴 index = ", $(this).index());
setSelectMenu(this);
});
}
function updateMenu() {
if($selectedMenu == null){
alert("메뉴를 선택하세요.");
}else {
var menuName = $menuName.val();
$selectedMenu.html(menuName);
}
}
function removeMenu(){
if ($selectedMenu == null){
alert("메뉴를 선택하세요.");
} else{
$selectedMenu.remove();
$selectedMenu = null;
}
}
function moveUpMenu() {
if ($selectedMenu == null){
alert("메뉴를 선택하세요.");
} else{
var $prevMenu = $selectedMenu.prev();
$prevMenu.before($selectedMenu);
}
}
function moveDownMenu() {
if ($selectedMenu == null){
alert("메뉴를 선택하세요.");
} else{
var $nextMenu = $selectedMenu.next();
$nextMenu.after($selectedMenu);
}
}
</script>
</head>
<body>
<div>
<input type="text" id="menuName">
<button id="add">추가</button>
<button id="update">수정</button>
<button id="remove">삭제</button>
<button id="up">UP</button>
<button id="down">DOWN</button>
</div>
<ul class="menu">
<!-- 메뉴 추가-->
</ul>
</body>
</html>
728x90
반응형
'HTML > jQuery 기초' 카테고리의 다른 글
| [jQuery] 해당 스타일 jQuery를 이용하여 변경하기 (0) | 2020.08.04 |
|---|---|
| [jQuery] 노드 수정하기 (0) | 2020.08.04 |
| [jQuery] 노드 삭제하기 (0) | 2020.08.04 |
| [jQuery] 노드 움직이기 (0) | 2020.08.04 |
| [jQuery] 노드 추가하기 (0) | 2020.08.03 |
