클릭시 숫자를 증가시키는 버튼

 

저런 모양으로 숫자버튼을 클릭하면 해당 버튼모양의 아이콘 숫자가 변경되는 방식입니다.

 

JQuery를 이용합니다.
-숫자를 클릭하면 해당 버튼모양에 숫자가 쌓이는 방식입니다.
-0~9로만 변경됩니다.(예:숫자자물쇠 퍼즐용)
-값받아서 보낼 목적으로 input을 이용합니다.

-역순이 될경우 "+"를  "-"로 바꾸면 됩니다.

-개인적으로는 onclick 함수가 보이지 않는 2번 구현을 좋아합니다.

순서는 다음과 같습니다.
1. 클릭시 (해당 위치에 입력되어있는)값을 가져온다. 
2. 숫자가있다면 +1처리, 9인경우 0.
3. 값이 있던 곳에 계산된 숫자를 넣어준다. 

 

/* 1번 방식*/ 

<input type='button' class="btn btn-default " onclick = "count_num(this);" value='0' >

<input type='button' class="btn btn-default " onclick = "count_num(this);" value='1' >

<input type='button' class="btn btn-default " onclick = "count_num(this);" value='2' >

<input type='button' class="btn btn-default " onclick = "count_num(this);" value='3' >

 

:스크립트

<script>
function count_num(num){
    var number = ($(num).attr('value'));
    if(number==9){     // 숫자가 9라면 0으로 만든다.
        $(num).attr('value', '0'); //초기화 : 0 
    }else{
        var plus_num = parseInt(number) + 1; //숫자화해서 1을 추가한다(역순카운트일경우 -1)
        $(num).attr('value', plus_num);
    }
}
</script>

 

/* 2번 방식*/

 

<input type='button' class="btn btn-default chkcount" value='0' >

<input type='button' class="btn btn-default chkcount" value='1' >

<input type='button' class="btn btn-default chkcount" value='2' >

<input type='button' class="btn btn-default chkcount" value='3' >

 

:스크립트

 

<script>
 
$('input').on({ //원하는 target을 입력하면 됨. .chkcount를 사용해도 됨.
 
    "click" : function(){ // "click"이 발생할때
        
        var number = ($(this).attr('value')); // 해당 발생한값의 value를 가져온다.
 
        if(number==9){ // 숫자가 9라면
            $(this).attr('value', '0'); // 숫자가 9라면 0으로 만든다.
        }else{ //9 가 아니라면
            var plus_num = parseInt(number) + 1; //+1을 증가. 
            $(this).attr('value', plus_num); //해당값을 적용해준다.
        }
 
    }
 
});
</script>