21-Beego优选商品总价

我们要根据用户设置的商品数量,显示商品的总价.这里面要用到JS来监视用户输入的变化,计算结果返回相应的值,由于jQuery框架能够简化JS语法,所以我们这里用jQuery框架获取DOM元素,监听数据变化,返回结果,话不多说,一起来实践吧

效果图.gif

0.逻辑注意点

我们这里放弃数量输入框的监听,只监听数量加/减的点击事件

1.语法注意点

1.jquery不同于go,要写;
2.用$关键字获取DOM元素
3." .val() "获取/修改input输入框内容
4." .text() "获取/修改span/a标签内容
5.parseInt将获取的字符转换为整数

一.引入jQuery框架

1.将如下两个文件拷贝到js文件夹下

image.png

2.在需要使用的detail.html文件中导入框架

image.png

二.分析监听元素

image.png

监听数量+/-这两个DOM元素,修改数量显示和总价

三.检测是否监听成功

image.png

在需要监听的DOM元素下面添加JS代码,监听点击事件,弹出警示框成功,就代表监听元素成功

四.实施监听逻辑

1.编写jQuery入口函数

image.png

2.定义监听全局变量

image.png

3.监听DOM元素点击事件

image.png

image.png