클릭하여 상품 수량을 늘리거나 줄이고 총 가격을 자동으로 계산합니다

클릭 증가 또는 감소 상품 수량 및 자동 계산 총 가격: 본 장은 클릭 단추를 통해 상품의 수량을 추가하거나 삭제하고 자동으로 상품의 총 가격을 계산하는 방법을 소개합니다.코드 인스턴스는 다음과 같습니다.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title> </title> 
<style type="text/css">
span{
  color:red;
  cursor:pointer;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
  $("#quantity").keyup(function(){
    if(isNaN($(this).val())||parseInt($(this).val())<1){
      $(this).val("1");
      $("#totalPrice").html($("#price").val());
      return;
    }
    var total=parseFloat($("#price").val())*parseInt($(this).val());
    $("#totalPrice").html(total.toFixed(2));
  })
   
  $("#add").click(function(){
    numAdd();
  });
   
  $("#del").click(function(){
    numDec();
  });
})
/* +1*/
function numAdd(){
  var num_add = parseInt($("#quantity").val())+1;
  if($("#quantity").val()==""){
    num_add = 1;
  }
  $("#quantity").val(num_add);
  var total = parseFloat($("#price").val())*parseInt($("#quantity").val());
  $("#totalPrice").html(total.toFixed(2));
}
/* -1*/
function numDec(){
  var num_dec = parseInt($("#quantity").val())-1;
  if(num_dec<1){
    // 1
    alert("not lt 1");
  }
  else{
    $("#quantity").val(num_dec);
    var total = parseFloat($("#price").val())*parseInt($("#quantity").val());
    $("#totalPrice").html(total.toFixed(2));
  }
}
</script>
</head>
<body>
<p>
   :<span id="del">-</span> 
  <input type="text" id="quantity" /> 
  <span id="add">+</span>
</p>
<p class="sdsd">
   :<span id="totalPrice">28.10</span>
</p>
<input type="hidden" value="28.1" id="price" />
</body>
</html>

상기 코드에서 좌우 버튼을 누르면 전편의 증감을 실현할 수 있고 총 가격을 자동으로 계산할 수 있으며 텍스트 상자에 수량을 수동으로 쓸 때도 총 가격을 자동으로 계산할 수 있다. 다음은 그 실현 과정을 소개한다.코드 메모: 1.$(function () {}), 문서 구조가 완전히 불러오면 함수의 코드를 실행합니다.2.$("#quantity").keyup (function () {}), 텍스트 상자에 keyup 이벤트 처리 함수를 등록합니다.3.if(isNaN($(this).val())||parseInt($(this).val () <1), 텍스트 상자의 내용이 숫자가 아니거나 1.4.$보다 작은지 판단합니다.(this).val("1"), 텍스트 상자의 내용을 1로 설정합니다.5.$("#totalPrice").html($("#price").val (), 가격을 표시하는 span 요소의 내용을 id 속성 값이price에 제공하는 가격으로 설정합니다.6.return, 점프 함수의 실행.7.var total=parseFloat($("#price").val())*parseInt($(this).val (), 상품의 총 가격을 계산합니다.8.$("#totalPrice").html(total.toFixed(2), 총 가격을 span 요소에 기록합니다.9.$("#add").클릭 (function () {}), 이벤트 처리 함수를 등록하고 클릭하면 상품 수량을 추가할 수 있습니다.10.$("#del").클릭 (function () {}), 이벤트 처리 함수를 등록하고 클릭하면 상품 수량을 삭제할 수 있습니다.11. functionnumAdd () {}, 이 함수는 상품 수량을 추가할 수 있고 총 가격을 자동으로 계산할 수 있습니다.12.var num_add = parseInt($("#quantity").val()+1, 텍스트 상자 숫자 값 1.13 추가.if($("#quantity").val()==""){num_add = 1;},텍스트 상자의 내용이 비어 있으면num_add 값은 1로 설정됩니다.14.$("#quantity").val(num_add), 텍스트 상자의 값을 설정합니다.15.var total = parseFloat($("#price").val())*parseInt($("#quantity").val (), 총 가격 계산.16.$("#totalPrice").html(total.toFixed(2), 가격에 대해 두 개의 소수 처리를 보류하고 span에 기록합니다.2.관련 읽기: 1.isNaN() 함수는 JavaScript의 isNaN() 메서드 섹션을 참조할 수 있습니다.2.parseInt () 함수는javascript의parseInt () 함수 1장을 참조할 수 있습니다. 3.html () 함수는 jQuery의 html () 방법 1장을 참조할 수 있습니다. 4.parseFloat () 함수는javascript의parseFloat () 방법 1장을 참조할 수 있습니다. 5.toFixed() 함수는 javascript의 Number 대상의 toFixed() 방법 1장을 참조할 수 있습니다.
원문 주소:http://www.softwhy.com/forum.php?mod=viewthread&tid=13693
자세한 내용은 다음을 참조하십시오.http://www.softwhy.com/jquery/

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

클릭하여 상품 수량을 늘리거나 줄이고 총 가격을 자동으로 계산합니다

좋은 웹페이지 즐겨찾기