통합검색

Javascript

[Jquery] 수량 증가 감소 버튼

  • 2022.07.01 14:36:04
첨부된 이미지파일
 [!]HTML[/!]
 
<div class="count-wrap _count">
    <button type="button" class="minus">감소</button>
    <input type="text" class="inp" value="1" />
    <button type="button" class="plus">증가</button>
</div>




[!]CSS[/!]
.count-wrap {position: relative;border: 1px solid #ddd;overflow: hidden;width: calc(52px + 34px*2);display: flex;align-items: center;box-sizing: border-box;}
.count-wrap > button {border: 0;background: #fff;color: #000;width: 34px;height: 34px;font-size: 12px;}
.count-wrap .inp {border: 1px solid #ddd;border-width: 0 1px !important;height: 34px !important;margin: 0 !important;display: block;width: 100%;padding: 0;flex-grow: 1;flex-basis: 0;text-align: center;}

 


 
[!]jQuery[/!]
 
//수량 옵션count_number = {
    'init' : function() {
        this.action();
    },
    'action' : function() {
        var $ele = {
            'btn' : $('._count :button')
        }
        $ele.btn.on({
            'click' : function(e){
                e.preventDefault();
                var $count = $(this).parent('._count').find('.inp');
                var now = parseInt($count.val());
                var min = 1;
                var max = 999;
                var num = now;
                if($(this).hasClass('minus')){
                    var type = 'm';
                }else{
                    var type = 'p';
                }
                if(type=='m'){
                    if(now>min){
                        num = now - 1;
                    }
                }else{
                    if(now<max){
                        num = now + 1;
                    }
                }
                if(num != now){
                    $count.val(num);
                }
            }
        });
    }
}
$(function() {
    if($('._count :button').length>0){
        count_number.init();
    }
});
첨부파일1 20220701_143452.png (1.2K) 429 회 다운로드