根据商品数量自动计算价格

快乐打工仔 分类:实例代码

分享一段代码实例,它实现了自动计算商品价格的功能。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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()一章节。

根据商品数量自动计算价格,这样的场景在实际项目中还是用的比较多的,关于根据商品数量自动计算价格就介绍到这了。

根据商品数量自动计算价格属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容