根據商品數量自動計算價格

antzone發表於2017-04-18

分享一段程式碼例項，它實現了自動計算商品價格的功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.txt {
  width: 50px;
  height: 25px;
}
</style>
<script src='http://libs.baidu.com/jquery/2.0.0/jquery.js'></script>
<script>
$(function() {
  $(".add").click(function() {
    var oTxt = parseInt($(this).prev("input").val());
    oTxt++;
    var aa = oTxt * $(this).siblings("p").html();
    $(this).prev("input").val(oTxt);
    $(this).siblings("span").html(aa);
  })
  $(".del").click(function() {
    var oTxt = $(this).next("input").val();
    oTxt -= 1;
    var aa = oTxt * $(this).siblings("p").html();
    oTxt > 1 ? $(this).next("input").val(oTxt--) : $(this).next("input").val(1);
    oTxt > 1 ? $(this).siblings("span").html(aa) : $(this).siblings("span").html($(this).siblings("p").html());
  })
})
</script>
</head>
<body>
<div>
  <input type="button" value="-" class="del" />
  <input type="text" class="txt" value="1" />
  <input type="button" value="+" class="add" />
  <br /><b>單價:￥</b><p>5.00</p><br />
  <b>總價：</b><span>5.00</span>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(function() {})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.$(".add").click(function() {})，為加號按鈕註冊click事件處理函式。

（3）.var oTxt = parseInt($(this).prev("input").val())，獲取加號按鈕前一個input元素的value屬性值，並將其轉換為整數。

（4）.oTxt++，加1操作，就是商品數量加1。

（5）.var aa = oTxt * $(this).siblings("p").html()，數量乘以單價就是總價格。

（6）.$(this).prev("input").val(oTxt)，商品數量寫入文字框。

（7）.$(this).siblings("span").html(aa)，將總價格寫入對應元素。

二.相關閱讀:

（1）.parseInt()可以參閱javascript parseInt()一章節。

（2）.prev()可以參閱jQuery prev()一章節。

（3）.siblings()可以參閱jQuery siblings()一章節。

（4）.next()可以參閱jQuery next()一章節。

相關文章