data-value

[이소망]

자스&쿼리 기초반 텝 기능 예제 질문입니다.

우선 본강의는 제이쿼리로 텝기능 개발하셨는데, 저는 쌩자스로 만들어보고 싶은 욕심이 생겨 

그전 수업에 있었던 카로셀 슬라이더에 제가 적용했던 쌩자스 코드를 참고해 텝기능또한 적용해볼려했습니다.

/* 하단 슬라이더 코드 */

    <button data-value="1" class="slider">1</button>
    <button data-value="2" class="slider">2</button>
    <button data-value="3" class="slider">3</button>

<script>

        sliderBtn = document.querySelectorAll('.slider');       // 셀렉터 ALL 로 배열로 대려왔습니다.
        sliderCon = document.querySelector('.slider-container');      //이동해줄 원본 사진들 입니다.
 
        for(i=0; i<sliderBtn.length; i++){       // 셀렉  ALL 로 대려온 버튼의 배열 길이만큼 반복시킵니다.
            sliderBtn[i].onclick = function(){    //  위 포문을 이용해 버튼[i] 번째에 클릭 이벤트를 걸어줍니다.
                if(this.dataset.value == '1'){          //  this 로 이벤트를 발생시킨 [i] 번째 버튼의 데이터 벨류가 1 이라면 실행. 
                    sliderCon.style.transform = "translateX(0)"
                }else if(this.dataset.value == '2'){
                    sliderCon.style.transform = "translateX(-100vw)"
                }else if(this.dataset.value == '3'){
                    sliderCon.style.transform = "translateX(-200vw)"
                }
            }
        }

</script>

 

 

위 슬라이더에 사용한 방식으로 똑같이 텝 기능에도 적용해 보았습니다.

/*   쌤 코드 복붙   */

<div class="container mt-5"> 
        <ul class="list">
            <li data-value="1" class="tab-button">Products</li>       // <li> 테그속에도 데이터 벨류를 주었습니다.
            <li data-value="2" class="tab-button active">Information</li>
            <li data-value="3" class="tab-button">Shipping</li>
        </ul>
   
        <div class="tab-content">
            <p>상품설명입니다. Product</p>
        </div>
        <div class="tab-content show">
            <p>상품정보입니다. Info</p>
        </div>
        <div class="tab-content">
            <p>배송정보입니다. Shipping</p>
        </div>

</div>

 

<script>

        let tabBtn = document.querySelectorAll('.tab-button');  // 똑같이 셀렉터 ALL 로 배열로 대려왔습니다.
        let tabCon = document.querySelectorAll('.tab-content');   // 이친구도 이벤트 실행시 tabCon[0~2] 로 호출하여  remove / add 
       
       
        for(let i=0; i<tabBtn.length; i++){   // 위 슬라이더 설명과 같습니다.
            tabBtn[i].onclick = ()=> {
                if(this.dataset.value == 1){     // 동일하게 데이터 벨류 적용했지만 씨뻘건 글씨를 보이며 저를 위협합니다.
                    console.log('1');
                }else if(this.dataset.value == 2){
                    console.log('2');
                }
            }
        }

</script>

 

한번만 얻어걸려라는 식으로 무지성 똥꼬쇼를 난무해가며... 예.(this.name == 1 또는 this.indexOf == 0)

구글링도 해보았지만 도무지 제 빡대가리론 해답을 찾아낼수 없었습니다...

그마저도 안돌아가는 짱구를 아이코스 연타로 뻑뻑 찌워되며 오지게 굴려 찾아낸 오류는 

위 슬라이더에 사용한 <버튼> 테그는 this로 이벤트 발생시 data-set.value == ?? 혹은 name == ??으로 값을 가져와 비교할수있었지만. 

<에라이>  테그에선 처음부터 테그 속성으로 data-value 또는 name 도 줄수없거나, 아니면 줄수있다해도 this 라는 친구가 <에라이> 를 싫어해서 비교연산을 안해주는건지.... 

이정도 밖에 이해를 못하고있습니다....  

[codingapple]

의심스러운 부분은 언제나 콘솔창에 출력해보면 됩니다

이벤트리스너 안에서 this쓸거라면

콜백함수로 화살표함수 쓰면 안되기 때문인듯요

 

[이소망]

오.. 세상에 마상에 감사합니다 ..

이벤트리스너 속에서 this 를 사용시에 화살표 콜백함수는 쓰지말자...

명심하겠습니다!!

[글쓴이]

글