JQ 作业二

本文介绍了一个使用jQuery实现的交互效果:四张图片被点击后显示随机折扣,再次点击显示新的随机折扣并隐藏前一条信息。通过CSS布局、添加点击事件、显示与隐藏DIV以及生成随机数字等步骤详细讲解了实现过程,强调了JQ的选择器、遍历方法及JavaScript的数学函数应用。
摘要由CSDN通过智能技术生成

目标:

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

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

且前一条信息消失。


第一步

用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文字有效果,后面没有࿱

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值