jQuery 수 더하기

jQuery 수 더하기

---

토탈 수 올려주기

예를들면 음식점이나 영화 티켓 예매등 예약시 성인, 청소년, 어린이등의 인원수를 체크하여 토탈 값을 내려준다.

기타 다른용도로 사용을 해야 한다면 타이틀만 변경 하고 사용 해도 된다.

결과 화면은 다음과 같다. 

    

        
        0
        
    
    

        
        0
        
    
    

        
        0
        
    
    
    

        Total =
        0
    
    

// 인원 체크 토탈
function countBtn(){
    var $wrap = $('.totalFn'), 
        $btnMinus = $wrap.find('.minus'),
        $btnPlus = $wrap.find('.plus');
        $cell = $wrap.find('.cell');
        
    $btnMinus.on('click', function(e){
        var $this = $(this);
        var num = $this.parent().find('.num').text();
        num --;
        if (num <= 0) {
            num = 0;
        }
        $this.parent().find('.num').text(num);
        totalFn();
    });

    $btnPlus.on('click', function(){
        var $this = $(this);
        var num = $this.parent().find('.num').text();
        num ++;
        if (20 <= num) {
            num = 20; // 최대 인원수 
        }
        $this.parent().find('.num').text(num);
        totalFn();
    });

    function totalFn(){
        var $total = $(".totalFn .count-box")
        var total = 0;
        $total.find(".num").each(function(){ 
            total += Number($(this).text());
        });
        $(".count-total").text(total);
    };
}

sub's

Blog