제이쿼리를 자바스크립트로 바꾸고있습니다..!
본문
안녕하세요.
<script>
$(function(){
$(".more_start").click(function(){
if($(".more_start_btn").hasClass("on")){
} else {
$(".more_start_place").addClass("on");
$(".more_start_btn").addClass("off");
}
})
})
</script>
해당 스크립트를 자바스크립트로 바꾸고싶습니다.
제가 시도한 방법은..
<script>
const more_start = document.querySelector(".more_start");
const more_start_btn = document.querySelector(".more_start_btn");
const tr= document.querySelector(".more_start_place");
const CLICKED_CLASS = "off";
const CLICKED_CLASS02 = "on";
document.getElementByClassName("more_start").onclick = function{
const hasClass = more_start_btn.classList.contains(CLICKED_CLASS);
const trClass = tr.ClassName;
if (hasClass){
} else {
trClass.classList.add(CLICKED_CLASS02);
more_start_btn.classList.add(CLICKED_CLASS);
}
}
</script>
이렇게 입니다.
제이쿼리만 주구장창 사용하다.. 자바스크립트 사용해보려고하는데 ㅜ
도움 부탁드립니다
답변 2
여러가지 방법이 있기 때문에, 편한 방법으로 제작하시면 될 것 같습니다.
참고로 살펴보시기 바랍니다.
* HTML
<!DOCTYPE html>
<html lang="ko">
<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">
<title>jQuery -> vanilla</title>
<link rel="stylesheet" href="./style.css">
<script src="./script.js"></script>
</head>
<body>
<div>
<button class="more_start"></button>
<button class="more_start_btn"></button>
<button class="more_start_place"></button>
</div>
</body>
</html>
* CSS
div {
width: 300px;
margin: 0 auto;
display: flex;
flex-flow: column wrap;
gap: 20px;
}
button {
padding: 1rem;
font-size: 1.5rem;
font-weight: bold;
color: gray;
background-color: white;
border-radius: .5rem;
border: 1px solid gray;
box-shadow: 1px 1px 5px 5px rgb(226, 226, 226);
}
button:first-child {
width: 60%;
margin-bottom: 5rem;
}
button.on {
background-color: yellow;
color: chocolate;
}
button.off {
background-color: black;
}
* JS
// 버튼 텍스트 변경용 함수
const addClassName = (elem) => {
elem.innerText = elem.classList.toString();
}
// 클래스가 있는지 확인용 함수
const hasClass = (elem, className) => {
return elem.classList.value.indexOf(className) !== -1 ? true : false;
}
// 토글 처리용 함수
const toggleClass = (elem, addClass, removeClass) => {
elem.classList.remove(removeClass);
elem.classList.add(addClass);
}
window.onload = () => {
let btns = document.querySelectorAll('button')
for(let i = 0; i < btns.length; i++) {
addClassName(btns[i]);
}
let more_start = document.querySelector('button.more_start'),
start_btn = document.querySelector('button.more_start_btn'),
start_place = document.querySelector('button.more_start_place');
more_start.addEventListener('click', e => {
e.preventDefault();
if( hasClass(start_btn, 'on') ) {
toggleClass(start_place, 'on', 'off');
toggleClass(start_btn, 'off', 'on');
} else {
toggleClass(start_place, 'off', 'on');
toggleClass(start_btn, 'on', 'off');
}
addClassName(start_place);
addClassName(start_btn);
})
}
onclick function 안에 const를 남발하지 않도록 하세요. const는 한번 정의되면 재정의될 수 없는 상수이기 때문에, 클릭할때마다 정의를 해야하는 현재 상황과 맞지 않습니다.
