SIR
목록으로
이전글 다음글

제이쿼리를 자바스크립트로 바꾸고있습니다..! 채택완료

one9601
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전 조회 955
답변 2
목록

안녕하세요.

    <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>

이렇게 입니다.

제이쿼리만 주구장창 사용하다.. 자바스크립트 사용해보려고하는데 ㅜ

도움 부탁드립니다

#javascript

답변 2개

채택된 답변
+20 포인트

여러가지 방법이 있기 때문에, 편한 방법으로 제작하시면 될 것 같습니다.

참고로 살펴보시기 바랍니다.

* HTML

Copy 
<!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

Copy 
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

Copy 
// 버튼 텍스트 변경용 함수
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는 한번 정의되면 재정의될 수 없는 상수이기 때문에, 클릭할때마다 정의를 해야하는 현재 상황과 맞지 않습니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고