원하는 기능
1. 지역이름의 버튼을 클릭 시 그에 따른 이미지가 화면에 출력되는 것
2. 화면에 출력 시 opacity animation을 주는 것
3. 화면에 이미지가 출력되있는 상황에서 다른 버튼들을 클릭하면 기존의 이미지는
없어지고 클릭한 버튼에 따른 이미지가 출력되게 하는 것
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="dist/css/style.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css"
integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous" />
<title>잘난골목</title>
</head>
<body>
<header>
<div class="header-title">잘난 골목</div>
<ul class="title-list">
<li class="js-title-click" id="gangnam">강남</li>
<li class="js-title-click" id="hongdae">홍대</li>
<li class="js-title-click" id="hyehwa">혜화</li>
<li class="js-title-click" id="ehwa">이화</li>
<li class="js-title-click" id="ilsan">일산</li>
</ul>
</header>
<article class="post-appear">
<div class="post-list" id="js-gangnam">
<h2 class="post-title">믿고 보는 산책 추천 리스트</h2>
<ul>
<li>
<a href="html/first.html"> <img class="imagesize" src="image/post-1.jpg" alt=""></a>
</li>
<li>
<a href="#"> <img class="imagesize" src="image/post-1.jpg" alt=""></a>
</li>
<li><a href="#"><img class="imagesize" src="image/post-1.jpg" alt=""></a>
</ul>
<ul>
</li>
<li><a href="#"><img class="imagesize" src="image/post-1.jpg" alt=""></a>
</li>
<li><a href="#"><img class="imagesize" src="image/post-1.jpg" alt=""></a>
</li>
<li><a href="#"><img class="imagesize" src="image/post-1.jpg" alt=""></a>
</li>
</ul>
</div>
<div class="post-list" id="js-hongdae">
<h2 class="post-title">믿고 보는 산책 추천 리스트</h2>
<ul>
<li>
<a href="html/first.html"> <img class="imagesize" src="image/post-2.jpg" alt=""></a>
</li>
<li>
<a href="#"> <img class="imagesize" src="image/post-2.jpg" alt=""></a>
</li>
<li><a href="#"><img class="imagesize" src="image/post-2.jpg" alt=""></a>
</ul>
<ul>
</li>
<li><a href="#"><img class="imagesize" src="image/post-2.jpg" alt=""></a>
</li>
<li><a href="#"><img class="imagesize" src="image/post-2.jpg" alt=""></a>
</li>
<li><a href="#"><img class="imagesize" src="image/post-2.jpg" alt=""></a>
</li>
</ul>
</div>
<div class="post-list" id="js-hyehwa">
<h2 class="post-title">믿고 보는 산책 추천 리스트</h2>
<ul>
<li>
<a href="html/first.html"> <img class="imagesize" src="image/post-3.jpg" alt=""></a>
</li>
<li>
<a href="#"> <img class="imagesize" src="image/post-3.jpg" alt=""></a>
</li>
<li><a href="#"><img class="imagesize" src="image/post-3.jpg" alt=""></a>
</ul>
<ul>
</li>
<li><a href="#"><img class="imagesize" src="image/post-3.jpg" alt=""></a>
</li>
<li><a href="#"><img class="imagesize" src="image/post-3.jpg" alt=""></a>
</li>
<li><a href="#"><img class="imagesize" src="image/post-3.jpg" alt=""></a>
</li>
</ul>
</div>
<div class="post-list" id="js-ehwa">
<h2 class="post-title">믿고 보는 산책 추천 리스트</h2>
<ul>
<li>
<a href="html/first.html"> <img class="imagesize" src="image/post-4.jpg" alt=""></a>
</li>
<li>
<a href="#"> <img class="imagesize" src="image/post-4.jpg" alt=""></a>
</li>
<li><a href="#"><img class="imagesize" src="image/post-4.jpg" alt=""></a>
</ul>
<ul>
</li>
<li><a href="#"><img class="imagesize" src="image/post-4.jpg" alt=""></a>
</li>
<li><a href="#"><img class="imagesize" src="image/post-4.jpg" alt=""></a>
</li>
<li><a href="#"><img class="imagesize" src="image/post-4.jpg" alt=""></a>
</li>
</ul>
</div>
<div class="post-list" id="js-ilsan">
<h2 class="post-title">믿고 보는 산책 추천 리스트</h2>
<ul>
<li>
<a href="html/first.html"> <img class="imagesize" src="image/post-5.jpg" alt=""></a>
</li>
<li>
<a href="#"> <img class="imagesize" src="image/post-5.jpg" alt=""></a>
</li>
<li><a href="#"><img class="imagesize" src="image/post-5.jpg" alt=""></a>
</ul>
<ul>
</li>
<li><a href="#"><img class="imagesize" src="image/post-5.jpg" alt=""></a>
</li>
<li><a href="#"><img class="imagesize" src="image/post-5.jpg" alt=""></a>
</li>
<li><a href="#"><img class="imagesize" src="image/post-5.jpg" alt=""></a>
</li>
</ul>
</div>
</article>
<script src="titleClick.js"></script>
</body>
</html>javascript
function removeShow() {
const postList = document.querySelectorAll('.post-list');
postList.forEach(span => {
span.classList.remove('show');
})
}
function clickEvent(event) {
const targetId = event.target.id;
if (targetId === 'gangnam') {
const gangnamImg = document.getElementById('js-gangnam');
gangnamImg.classList.toggle('show');
if (gangnamImg.classList.contains('show')) {
removeShow();
gangnamImg.classList.toggle('show');
}
} else if (targetId === 'hongdae') {
const hongdaeImg = document.getElementById('js-hongdae')
hongdaeImg.classList.toggle('show');
if (hongdaeImg.classList.contains('show')) {
removeShow();
hongdaeImg.classList.toggle('show');
}
} else if (targetId === 'hyehwa') {
const hyehwaImg = document.getElementById('js-hyehwa')
hyehwaImg.classList.toggle('show');
if (hyehwaImg.classList.contains('show')) {
removeShow();
hyehwaImg.classList.toggle('show');
}
} else if (targetId === 'ehwa') {
const ehwaImg = document.getElementById('js-ehwa')
ehwaImg.classList.toggle('show');
if (ehwaImg.classList.contains('show')) {
removeShow();
ehwaImg.classList.toggle('show');
}
} else {
const ilsanImg = document.getElementById('js-ilsan')
ilsanImg.classList.toggle('show');
if (ilsanImg.classList.contains('show')) {
removeShow();
ilsanImg.classList.toggle('show');
}
}
}
function init() {
const titleClick = document.querySelectorAll('.js-title-click');
for (const title of titleClick) {
title.addEventListener('click', clickEvent);
}
}
init();
설명
동네 이름들의 공통된 class에 하나하나 click이벤트를 준다.
클릭한 container마다 id를 줘서 조건문으로 같은 id를 가졌을때만
toggle함수로 show클래스를 추가한다.
만약 show가 추가되어있다면 post-list클래스를 가지고 있는 모든 container에서 show 클래스를 지운다.
원래는 클릭된 자신만을 제외하고 나머지 post-list클래스를 가지고 있는 container에서 show를 제거하고 싶었지만 jquery에 관한 내용만 나왔기에
내가 선택한 것은 모든 show클래스를 지운 후 선택한 버튼의 클래스에 다시 show를 추가하는 것이다.
과거의 흔적
const liPost1 = document.getElementById('lipost-1');
const liPost2 = document.getElementById('lipost-2');
const liPost3 = document.getElementById('lipost-3');
const liPost4 = document.getElementById('lipost-4');
const liPost5 = document.getElementById('lipost-5');
const imgArray = ['post-1', 'post-2', 'post-3', 'post-4', 'post-5'];
function toggleEvent(post) {
let postImg = document.getElementById(post);
if (postImg.classList.contains('remove')) {
postImg.classList.remove('remove');
}
postImg.classList.toggle('show');
if (!postImg.classList.contains('show')) {
postImg.classList.toggle('remove');
}
}
function printPost(event) {
const target = event.target;
const tarId = target.id;
if (tarId === 'lipost-1') {
toggleEvent('post-1');
} else if (tarId === 'lipost-2') {
toggleEvent('post-2');
} else if (tarId === 'lipost-3') {
toggleEvent('post-3');
} else if (tarId === 'lipost-4') {
toggleEvent('post-4');
} else {
toggleEvent('post-5');
}
}이전도 지금과 비슷하지만 id의 이름이나 class의 이름을 숫자로 표기하였기 때문에 그다지 좋지 못하였다.
그리고 조건문에서 toggleEvent에 인자를 post-숫자를 줘서 그 post-숫자를 가지고 있는 container를 지정해서 remove와 show를 추가해주는 함수를 작성했다.
하지만 여기서 문제가 생겼다.
문제는 버튼을 클릭 했을때는 이미지가 잘 보이지만 다른 버튼을 클릭했을때
기존에 보이던 이미지의 show클래스가 그대로 남아있다는 것이 문제였다.
또 클릭한 버튼을 다시 클릭했을때 이미지가 사라지지만 전에 클릭한 이미지는 show클래스가 그대로 남아있기 때문에 이미지가 사리지지 않는 것이 문제였다.
**그래서 먼저 show클래스를 추가해준후 다른 모든 post-list에서 show를 삭제하고 다시 show를 추가해주는 것으로 다른 버튼을 클릭해도 이미지가 그대로 남아있는 문제를 해결했다. 하지만 이게 최선이라고는 생각되지 않는다. 지금 마음에 들지 않는건 굳이 저렇게 조건문을 쓰고 show toggle을 두번이나 쓸 필요가 있었을까 하는 생각이 든다. 조금더 나은 방법이 있을거라 생각되지만 지금은 지식이 좀 많이 모자른 듯하다. 더 공부해서 리팩토링하도록 하자.**
아직은 달걀안의