Jquery[제이쿼리] on(keyup),empty(),append()로 총주문금액계산하기

안녕하세요~ 주니주니 입니다.

오늘은 제이쿼리[jquery] on(keyup),empty(),append()로 쇼핑몰에서 상품을 선택하면
자동으로 총주문금액이 나오도록 하는부분을 배워보겠습니다.

오늘은 css부분이 조금 많네요 귀찮아서 대충대충하긴했습니다만...
오늘도 파이팅요!!

실행화면 입니다 수량을 입력하면 주문금액 부분에 계산된 값이 나오도록 할 예정이에요~

===============================
$('.i1').on('keyup',function(e){ 
   var amount = (10000*$('.i1').val());
    alert(amount);
  });
===============================
class i1가 keyup이벤트가 실행되면
amount변수에 class i1의 val()값 즉 <input type="text">의 내용값입니다.
이랑 상품의 가격을 곱한값을 담아라입니다.
그리고 alert()함수로 값을 확인해보겠습니다.

값을 입력하기 전입니다.

2라는 숫자를 입력한뒤 키를 때니 경고창으로 계산된 금액이 나온 모습이랍니다.
그럼이제 경고창에 뜨는 금액을 주문금액 : <== 뒷부분에 보이도록 하면되겠죠?

===============================
$('label').empty();
$('label').append(amount+"원");
===============================
<label>태그의 대상으로 empty()메서드로 하위요소를 제거하라 
제거하는 이유는 주석처리해보고 실행해보시면 안답니다^ㅡ^/
<label>태그의 대상으로 append()메서드로 amount<==위에서 계산한 값이죠?
그리고 원을 붙여서 추가하라는 뜻입니다. append()는 이미 여러번 설명해서 패스~하겠습니다.
※empty()란 일치하는 모든 요소및 하위요소와 자식 노드들을 제거하는 메서드입니다.

실행한뒤 2개를 적으니 2마원이라는 금액이 주문금액 뒷부분에 추가된모습입니다.!

수량을 더늘려보니 (수량 * 10000)계산금액이 뒤에 나오는것을 확인할수있답니다.!
오늘은 제이쿼리[jquery] on(keyup),empty(),append()로 쇼핑몰에서 상품을 선택하면
자동으로 총주문금액이 나오도록 하는부분을 배워보았습니다.
그럼 다음에 또 만나요~