061020 JavaScript: button으로 구현

radiobutton > button으로 대체

 

1. 버튼 누르면 색 변경

        // window.addEventListener("load", function(){
        //     var btns = document.getElementsByTagName("input"); //변수 선언이 아니면 따옴표 신경 쓰지 말라는데,,?
            //위에 선언이 배열형태로 토해내기 때문에, addEventListener못하는거야
            // btns.addEventListener("click", function(){ //여러개 elements에 addEvent 못쓴대    
            // }) 
            // for(btn in btns){

            // }
            // for (i = 0; i < btns.length; i++){
            //         btns[i].addEventListener("click", function(){
            //             //document.body.div.style.backgroundColor = btns[i].value; 내가 한거 오류난다.
            //             var a = document.getElementById("aaa"); // elements를 쓰면 배열로 나온다
            //             a.style.backgroundColor = this.value; //오 this.value는 String으로 나오나보네
            //         })
            //         console.log(btns[i].value);

            //     }
            
            // for(i = 0; i < btns.length; i++){
            // //callback function

            // var color = function(){
            //     var a = document.getElementById("aaa");
            //     a.style.backgroundColor = this.value;
            // }

            // btns[i].addEventListener("click", color);
            // }

        // })
    </script>
    <script>
        $(function(){
            //var btns = $("input[type='button']");
            /////
            $("input").click(function(){
            /////
                //this 는 DOM 형태 (event가 발생하는 시점에 해당  target이 this가 된다.)
                //this의 자료형을 명시적변환(casting)
                //$(document). --> $(DOM)
                //%this 아님! -->  $(this)
                //console.log($(this).val());
                ///
                $("#aaa").css("background-color", $(this).val());
                ////
                //제이쿼리 생각해보니 for문 안돌려도 됐었네,,,
                ////
            })
        })
        /////
        //callback
        // var cbcolor = function(){
        //    return $("#aaa").css("background-color", this.value)
        // }

        // for(i = 0; i < $("input").length; i++){
        // $("input").eq(i).click(cbcolor);
        // }
        

        // for(i = 0; i < $("input").length; i++){
        //     $("input").eq(i).click(function(){
        //         $("#aaa").css("background-color", this.value)
        //     })
        // }
        
        // $("input").eq(0).click(function(){
        //     $(".aaa").css("background-color", "lightsteelblue")
        // })
        // $("input").eq(1).click(function(){
        //     $(".aaa").css("background-color", "darkgreen")
        // })
        // $("input").eq(2).click(function(){
        //     $(".aaa").css("background-color", "pink")
        // })

---

버튼 누르면 내용 변경

<script>
        $(function(){ //헤더쪽에 있을때 필요한거
        
        //$(".tab:eq(0)").addClass("active");

        $(".tab").click(function(){
            var selectedIndex = $(this).index(); // click되어진 element가 배열의 몇 번째인지
            //클릭된 것 이외의 것에는 active 제거, 클린된 것에 active를 넣고싶으면 each를 써야함
            //this만으로는 불가능.
            //each() 선택한 요소들에 각각 적용하는 것.
            $(".tab").each(function (index, element){//element는 dom형태의 자료형 변환 필요
                
                if(index==selectedIndex){ //class="first active" 처럼 들어가게된다~. 지금 당장 여기에는 필요 없는 부분이긴 해
                    $(element).addClass("active");  
                } else {
                    $(element).removeClass("active");
                }
            }) 
            //tabcontent를 클릭한 것과 안한 것에 display none과 block 설정
            $(".tabcontent").each(function (index, element){//element는 dom형태의 자료형 변환 필요
                if(index==selectedIndex){ //위에 .tab과 연결고리야.
                    $(element).css({
                        "display" : "block",
                        "background-color" :  "lightcyan"  
                    });  
                } else {
                    $(element).css("display", "none");  
                }
            }) 
        })
    })

        
    </script>