괴발개발

[실험실]오늘자 코드리뷰 괴물 본문

실험실/코드리뷰

[실험실]오늘자 코드리뷰 괴물

dinoelll 2023. 2. 14. 22:58
/*순서 div 를 클릭하면 숫자가 올라간다.
        1. div에 클릭 이벤트를 준다.
        2.클릭할때마다 숫자가 올라가야 한다.
        3. 올라가는 숫자들을 cnt에 나타나게 해준다.

노란색에 올라간 숫자를 나타나게 해야함.

 

 $('.item').click(function(){
            // console.log('click')

           
            for(i=0; i<2; i++){
                function click()
               
                console.log(i)
               
                var num = i
            }

            var a = num
            var val = $(this).val();
            var val = parseInt(a);
            // console.log(val)
            $('div.cnt').text(val);

           


        });
 
처음 만든 괴물 ㅋㅋ.. val 값을 i로 바꾸면 노란색 숫자 cnt 가 2로 바뀌긴 함.. ㅋㅋㅋㅋㅋ 일단 for 이용해서 한자리씩 올리려고 했는데 어케 했는지 모르겟음.
 $('.item').click(function(){
           console.log('click')
              $('div.cnt').html(num+1);
              num++;
           
           
         

           


        });
 
옆에 분이 도와주셔서 한자리씩은 올라가게 됨. 근데 하나씩 적용이 안됨
 
이 클릭한 이벤트에!!! 딱 그것 집는게 필요. 그래서
 
$(this).find('div,cnt') 이런식으로 딱 정해주면 정해진 이벤트의 자식을 딱 찝는다.!!!

 

//1. div. item 에 클릭 이벤트를 걸어주고 , 지금 써주고 말꺼기 때문에 익명함수를 넣어준다.
        $('div.item').click(function(){
            //2. 다음으로 div.cnt 의 태그 사이 값 가져와야 한다. 그렇기 때문에 지금 클릭한 당사자인 div.item인 this에서
            // div.cnt가 자식관계인지 확인한다. 일단 자식관계이고 클릭된 this의 자식들이 있기 때문에 find를 사용해 각각을 구분
            //할 수 있게 된다.
            //그럼 this인 이 클릭된 당사자를 가져오고 find에 검색해서 찾을 값은 div.cnt이기 때문에 find 값에 넣어준다.
            //텍스트를 가지고 올거기 때문에 text 함수를 넣어준다.
            //그리고 빼내온 숫자 텍스트를 cnt변수에 넣는다. 그런데 cnt는 텍스트기 때문에 숫자로 인식시키지 못한다. 그렇기 때문에
            //텍스트 뽑아오게 작성한 것에 parseInt를 해줘서 숫자값으로 바꿔준다. 그렇게 하고
            var cnt = parseInt($(this).find('div.cnt').text());//
           
            cnt++
            //3. cnt ++를 해주면 클릭 할 때마다 cnt의 값이 커지게 된다.
            console.log(cnt);
            //4. 이 증가한 값을 this의 자식요소중에 click한 이 this의 div.cnt의 값을 찾고, 텍스트 함수안에 cnt 값을 나타나도록
            //넣어주면 된다.
            $(this).find('div.cnt').text(cnt);

            //%% 일단 this로 불러올꺼 선택하는게 더 중요했던듯
        })

최종 결과 코드.

 결론 조금 재밌긴 한데, 이상하게 시도를 하는거 같다.

그리고 작성하기 전에 순서를 짜긴 짜야하는데 도대체 지금 개념 정립도 안되서 순서 짜는게 안된다.

순서짜는게 중요하다고 하심.

 

깃허브도 빨리 하고싶고, 자료구조랑 알고리즘 공부 하고싶음. 딩딩하라 님이 어쩌구 저쩌구 하는데 무서워 졌음.

노션도 쓰고 싶은데 솔직히 귀찮다.ㅋ.ㅋ

Comments