통합검색

javascript

[Jquery] 수량 증가 감소 버튼

첨부된 이미지파일
 [!]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;padding: 0 38px;border: 1px solid #ddd;overflow: hidden;width: 60px;}
.count-wrap > button {border: 0;background: #ddd;color: #000;width: 38px;height: 38px;position: absolute;top: 0;font-size: 12px;}
.count-wrap > button.minus {left: 0;}
.count-wrap > button.plus {right: 0;}
.count-wrap .inp {border: 0;height: 38px;text-align: center;display: block;width: 100%;}

 


 
[!]jQuery[/!]
 
//수량 옵션
$('._count :button').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);
        }
    }
});
첨부파일 20220701_143452.png (1K) 336 회 다운로드