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;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 회 다운로드 |
---|