JQ 作业二

目标：

四张图片，点击出现随机折扣。

再点击，出现第二条随机折扣消息。

且前一条信息消失。

---

第一步

用CSS布局

布局完毕，用display:none隐藏放置文字的div。

第二步

给图片添加点击事件

$("#box img").click(function(){};

第三步

再给图片添加点击出现文字DIV效果

$(“img”).next("#wen").show();
$(this).siblings(’#wen’).show();

前者：
点击，出来四个DIV文字，但需要是对应的一个DIV文字。
后者：
解决了问题，点击一个，对应了相应的文字DIV。

第四步

点击第一个显，点第二个，一消失，DIV循环。

在SHOW前面添加，$("#wen").hide();
问题：
第一个DIV文字有效果，后面没有？
解决：
发现JQ里对CLASS与ID选择是不一样的，ID是唯一，即使有多个ID，JQ选择器也只会获取其中一个，设置动作也只允许出现一次。所以把所有文字DIV里ID改为CLASS，就行。

---

---

第五步

写出随机数字代码，给四个DIV文本重新赋值。

运用了JS，先定义一个变量，用Math.random()*5+5
会取值0-1的数值，包括0，但不包括1。与5相乘，在于5相加，出现的数值会保持在5-10.5之间，但我们只需要1~10随机数字。所以，在外面添加Math.ceil(Math.random()*5+5)。
Math.ceil会对浮点数向上取，达成我们的目的。
最后再丢到一个新变量里，给四个放文字DIV重新赋值。

---

---

DOM方式：

用remove删除所有元素和after插入。

---

总结：

一、了解JQ里遍历，本次作业用到了next()，siblings()。
二、了解JQ里选择器，对于CLASS和ID的区别对待。
三、重新回温了JS里数学函数，浮点数与向上取整。

---

拓展：

("#XX").html(“内容”)；
text():获取或者改变指定元素的文本
html():获取或改变指定元素的html元素以及文本
val():获取或者改变指定元素的value值（一般是表单元素）

---