수량버튼 + / - 클릭시 총 금액 변경 스크립트

 

display:table을 이용하여 왼쪽 오른쪽 정렬하고

수량 up down 이미지 클릭했을 때 input 태그에 수량이 같이 올라가며 총금액도 변환되어야 한다.

input id값은 수정시 스크립트도 같이 수정해 줘야하며 수량을 직접 입력하지 않게 하기위해 readonly가 있어야한다.

<div class="content_right">
  <h2>수량표시 + / -</h2>
  <dl>
    <dt>정가</dt>
    <dd>￦200,000</dd>
  </dl>
  <dl>
    <dt>판매가</dt>
    <dd>￦160,000</dd>
  </dl>
  <dl>
    <dt>플러스 마이너스</dt>
    <dd>
      <div class="qty">					
        <div class="plus"><a href="javascript:change_qty2('p')"><img src="/images/sub/plus.jpg" alt="+"></a></div>
        <input type="text" name="ct_qty" id="ct_qty" value="1" readonly="readonly">
        <div class="minus"><a href="javascript:change_qty2('m')"><img src="/images/sub/minus.jpg" alt="-"></a></div>
      </div>	
    </dd>
  </dl>
  <dl>
    <dt>총 금액</dt>
    <dd id="total_amount">74,000</dd>
  </dl>
</div>

Number.prototype.format = function(){
  if(this==0) return 0;

  var reg = /(^[+-]?\d+)(\d{3})/;
  var n = (this + '');

  while (reg.test(n)) n = n.replace(reg, '$1' + ',' + '$2');

  return n;
};
 

String.prototype.format = function(){
  var num = parseFloat(this);
  if( isNaN(num) ) return "0";

  return num.format();
};
    
var basic_amount = parseInt('74000');

function change_qty2(t){
  //var min_qty = '수량버튼'*1;
  var min_qty = 1;
  var this_qty = $("#ct_qty").val()*1;
  var max_qty = '200'; // 현재 재고
  if(t=="m"){
    this_qty -= 1;
    if(this_qty<min_qty){
      //alert("최소구매수량 이상만 구매할 수 있습니다.");
      alert("수량은 1개 이상 입력해 주십시오.");
      return;
      }
    }
    else if(t=="p"){
      this_qty += 1;
      if(this_qty>max_qty){
        alert("죄송합니다. 재고가 부족합니다.");
        return;
        }
    }

  var show_total_amount = basic_amount * this_qty;
  //$("#ct_qty_txt").text(this_qty); 
  $("#ct_qty").val(this_qty);
  $("#it_pay").val(show_total_amount);
  $("#total_amount").html(show_total_amount.format());
}

.content_right{margin:20px; width:520px; padding-top:30px;}
.content_right h2{font-size:32px; height:50px; color:#444; line-height:1;   border-bottom:1px solid #dfdfdf;}
.content_right dl{display:table; width:100%; }
.content_right dl dt{display:table-cell; vertical-align:top; width:20%;}
.content_right dl dd{display:table-cell; vertical-align:top; width:80%;}