25-Beego优选修改购物车

这里我们将继续前端的动态交互操作,也将更加细致的学习,如何监听模板元素,监听Id与监听class的区别,以及如何监听模板对应的多条元素

效果图.gif

0.url

http://hemin.cn/jq/
http://hemin.cn/jq/each.html

1.新知识点

image.png

1.each
简单的说,就是遍历选中的多个元素,执行指定操作

image.png
image.png

2.find
简单的说就是快速选中指定元素的子元素

image.png
image.png
3.选择id与选择class以及模板监听注意点
image.png

2.bug

image.png
image.png

选中的元素内容含有非数字,导致后期paseInt转换失败
这里注意控制台输出要在浏览器中查看

image.png

3.编程技巧

如果发现有些图片请求失败,可以在该页面对应的css文件中搜寻该背景图片,找到选择器的名称,然后在html文件中搜寻该选择器,确定该背景图片的使用位置

4.语法注意点

在进行元素中val()后者text()获取值的时候,记住给它们传值可以是变量的运算,会自动转换为字符传,但是强制将获取的值转换为int利用parseInt函数的时候,要保证获取的值没有除数字意外的字符

一.设置类

image.png
image.png
image.png
image.png

二.监听变化

1.导入jQuery库

image.png

2.在购物车列表结束后添加script标签

image.png