<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
<link rel="stylesheet" href="css/reset.css">
<title>Document</title>
<style>
button {
font-weight: 700;
border: 2px solid #000;
margin-top: 10px;
}
button:hover {
background: gray;
color: white;
}
.del:hover, .del2:hover{
background: red;
}
.box {
margin: 30px;
display: flex;
}
.box .left, .right {
width: 500px;
height: 600px;
border: 3px solid #000;
box-sizing: border-box;
}
.box .left {
border-right: none;
}
.box .right {
width: 600px;
height: 600px;
}
.box h2 {
font-size: 30px;
margin: 10px;
text-align: center;
}
.box ul {
display: flex;
flex-wrap: wrap;
padding: 20px;
}
.box ul li {
width: 132px;
height: 220px;
margin: 10px;
padding: 10px;
border: 3px solid #000;
box-sizing: border-box;
}
.box ul li img {
width: 100px;
}
.box ul li p {
text-align: center;
font-size: 18px;
}
.box ul li button {
padding: 10px;
}
.left {
background: lightblue;
}
.right {
background: lightgray;
}
.right .clean{
padding: 15px;
font-size: 15px;
margin-left: 50px;
margin: 0 100px;
}
.right .back {
padding: 15px;
font-size: 15px;
margin: 0 0px;
}
.box .right li {
margin: 2px 20px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<h2>상품리스트</h2>
<div class="list">
<ul>
<li>
<img src="images/img0.png" alt="">
<p>상품 : 뽀로로</p>
<button class="add">담기</button>
<button class="del">삭제</button>
</li>
<li>
<img src="images/img1.png" alt="">
<p>상품 : 악어</p>
<button class="add">담기</button>
<button class="del">삭제</button>
</li>
<li>
<img src="images/img2.png" alt="">
<p>상품 : 펭구</p>
<button class="add">담기</button>
<button class="del">삭제</button>
</li>
<li>
<img src="images/img3.png" alt="">
<p>상품 : 루피</p>
<button class="add">담기</button>
<button class="del">삭제</button>
</li>
<li>
<img src="images/img4.png" alt="">
<p>상품 : 누렁이</p>
<button class="add">담기</button>
<button class="del">삭제</button>
</li>
<li>
<img src="images/img5.png" alt="">
<p>상품 : 곰</p>
<button class="add">담기</button>
<button class="del">삭제</button>
</li>
</ul>
</div>
</div>
<div class="right">
<h2>장바구니</h2>
<button class="clean">장바구니 비우기</button>
<button class="back">상품리스트로</button>
<ul>
</ul>
</div>
</div>
<script src="main.js">
'use strict';
</script>
</body>
</html>const get = (target) => {
return document.querySelector(target)
}
const getAll = (target) => {
return document.querySelectorAll(target)
}
// 재할당 함수
const re = () => {
$l_li = getAll('.left ul li');
$r_li = getAll('.right ul li');
$add = getAll('.left ul li .add');
$del = getAll('.left ul li .del');
$del2 = getAll('.right ul li .del2');
$ori = getAll('.right ul li .ori');
}
let $l_ul = get('.left ul');
let $r_ul = get('.right ul');
let $l_li = getAll('.left ul li');
let $r_li = getAll('.right ul li');
let li = '';
let btn = getAll('button')
// left
let $add = getAll('.left ul li .add');
let $del = getAll('.left ul li .del');
// right
let $clean = get('.right .clean');
let $back = get('.right .back');
let $del2 = getAll('.right ul li .del2');
let $ori = getAll('.right ul li .ori');
// left del
$l_ul.addEventListener('click', e => {
if (e.target.classList.contains('del')) {
e.target.parentElement.remove();
}
re();
})
// left add
$add.forEach(element => {
element.addEventListener('click', e => {
$r_ul.append(e.target.parentElement)
re();
$r_li.forEach(element =>{
element.lastElementChild.className = 'ori'
element.lastElementChild.textContent = '원래';
element.lastElementChild.previousElementSibling.className = 'del2'
element.lastElementChild.previousElementSibling.innerHTML = '제거';
})
re();
// button del2 이벤트
$r_ul.addEventListener('click', e => {
if (e.target.classList.contains('del2')) {
e.target.parentElement.remove();
}
re();
});
re();
})
});
// right clean
$clean.addEventListener('click', e => {
for (let i = 0; i < $r_li.length; i++) {
$r_li[i].remove();
}
re();
})
// right back
$back.addEventListener('click', e => {
for (let i = 0; i < $r_li.length; i++) {
$r_li[i].lastElementChild.className = 'del'
$r_li[i].lastElementChild.innerHTML = '삭제';
$r_li[i].lastElementChild.previousElementSibling.className = 'add'
$r_li[i].lastElementChild.previousElementSibling.innerHTML = '담기';
$l_ul.append($r_li[i]);
}
re();
});
// right ori
$r_ul.addEventListener('click', e => {
if (e.target.classList.contains('ori')) {
console.log(e.target.parentElement);
$l_ul.append(e.target.parentElement);
re();
$l_li.forEach(element =>{
element.lastElementChild.className = 'del'
element.lastElementChild.textContent = '삭제';
element.lastElementChild.previousElementSibling.className = 'add'
element.lastElementChild.previousElementSibling.innerHTML = '담기';
})
}
})
이벤트가 끝나면 바뀌는 요소들인 li, button 등 들은 맨 위에서 선언과 동시에 할당한 정보만 갖고 있기 때문에 이벤트 마지막에 re()라는 재할당 함수를 넣어 호출을 하였다.
이렇게 재할당을 하지 않으면 왼쪽에서 오른쪽으로 간 li는 인식이 되지 않으며, 버튼 또한 append 전의 성질을 그대로 갖고 있기 때문에 한 번밖에 실행을 할 수 없다. 경우에 따라서 버튼의 함수를 재할당 해줘야 하는 경우도 있다.
