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