jQuery를 이용한 태그 생성 삭제 컨트롤러 구현 #350
Description
안녕하세요.
현재 간단한 웹 어플리케이션을 제작하고 있는 학생입니다.
제가 구상하는 기능 중 하나인 클라이언트가 최초 HTML 파일을 로드할 때는 버튼 태그가 없는 상태에서,
jQuery를 이용해 한 지점을 누르면 선택할 수 있는 버튼 div 태그가 나타났다 사라졌다 하는 방법을 찾고 있습니다.
SPA방식을 나름 따라하고자 기존 HTML에 버튼 div 태그들을 투명도를 낮추어 숨기거나 z-index값으로 후방에 배치해놓고 올리는 방법을 사용하는 것은 비효율적이라고 생각해서 jQuery를 이용해서 필요에 따라 태그들을 넣고 빼는 방식을 이용하고자 했습니다.
이 기능을 제가 현재까지 구현한 방법을 간단하게 보여드리면,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>
<style>
div{
border: 1px solid red;
}
#orangeMarker{
height: 100px;
border: 3px solid black;
cursor: pointer;
}
</style>
<body>
<div id="orangeMarker"></div>
</body>
<script>
$(document).ready( function(){
$('body').on('click', '#orangeMarker', function(){
$('.options').length ? deleteButtonInfo() : showButtonInfo()
});
function showButtonInfo(){
var $option1 = $('<div class="options" id="option1"><span>인적이<br>드물어요</span></div>'),
$option2 = $('<div class="options" id="option2"><span>어두워요</span></div>'),
$option3 = $('<div class="options" id="option3"><span>사고가<br>난 적<br>있어요</span></div>'),
$option4 = $('<div class="options" id="option4"><span>유흥가에요</span></div>'),
$option5 = $('<div class="options" id="option5"><span>기타</span></div>');
$('#orangeMarker').after($option1);
$('#orangeMarker').after($option2);
$('#orangeMarker').after($option3);
$('#orangeMarker').after($option4);
$('#orangeMarker').after($option5);
}
function deleteButtonInfo() {
$('.options').remove();
}
})
</script>
</html>
생성되야할 버튼 div의 class 속성인 .options 의 존재여부를 통해 div를 생성 및 삭제하는 함수를 조건에 따라 실행되도록 위와 같이 코드를 짜서 구현하고자 하는 기능은 실행이 되는 것을 확인했습니다.
(각 div값마다 다른 데이터값을 갖고 있기 때문에 id값을 전부 다르게 부여했습니다.)
현재 제 능력으로는 jQuery로만 구현하고자 하다보니 위와 같은 방법이 최선이였고,
이는 매우 무식한 방법처럼 보이는데 다른 보편적인 방법을 안내해 주셨으면 좋겠습니다.
비슷한 유형의 방법을 안내해주는 링크나 코드도 상관없이 어떠한 정보라도 감사하게 받겠습니다.
혹시 제 설명이 부족하다면 코멘트 달아주세요!!
좋은 해결책이 있으신분이 계신다면 답변 부탁드립니다.
감사합니다.