JS === 实现通过点击td 跳转相应的图片
JS ========== 通过点击每个td 实现 跳转图片
样式:
.focus{background:#0f0}
结构:
<td class = "focus"></td>
<td></td>
<td></td>
<img src = "img/1.jpg " > // 在img下面有三张图片分别是 1.jpg 2.jpg 3.jpg
<script>
// 获取td
var tds = document.querySelectorAll("td") // 通过css选择器 来获取元素 ==> 得到的是一个数组
// 遍历数组,为每个td添加点击事件
for(var i = 0; i < tds.length ; i++){
tds[i].setAttribute("number", i + 1) // ====解决i 一直都是3的方法。i+ 1 的原因是 img 的路径 是从 1,2,3开始的
tds[i].onclick = function(){ // 在这里想根据i的值获取每个td,然后为每个td添加点击事件,但是函数放在了for循环里面,当点击事件还未点击执行的时候,for循环已经结束了。
// 所以这里的i 每次取到的都是 3 =====》解决方法,在for 循环的过程中,获取到 具体的 i 值,并把它作为td的一个属性的属性值保存起来,
// 这样当想获得每个td的 时候, 从 属性值里面获取即可
var index = this.getAttribute("number") // 之前设置了一个属性 number 存了 i+ 1,这里将这个值取出来
var src = "img/" + index + ".jpg" // index 作为图片的序号 重新给了src路径,就可以改变图片的路径了
// 下面这两行代码 是为了实现,当前显示的td 有背景色,点击每个td的时候会有一个背景色
document.querySelector(".focus").className = ""; // 清除当前的旧交点 当前 第一个td已经设置了背景色
this.className = ".focus" // 点击每个td的时候会给它添加一个focus类,这个类会改变td背景色
}
}
</script>
今日学习要点:
1. 将点击事件函数写在了for循环里面的时候,for循环会最先执行完毕,然后点击函数才会能够点击。
==== 所以要注意 for(var i)i 的问题。
2. className
div.className== 内置属性,获取class名字的时候,要使用className
转载于:https://www.cnblogs.com/rabbit-lin0903/p/11141144.html
JS === 实现通过点击td 跳转相应的图片相关推荐
- php 跳转邮箱,JS简单实现点击跳转登陆邮箱功能的方法
本文实例讲述了JS简单实现点击跳转登陆邮箱功能的方法.分享给大家供大家参考,具体如下: 前言 注册的过程中往往需要填写邮箱,并登陆邮箱进行验证.利用JS可以实现针对不同的邮箱进行点击登录验证,以下为实 ...
- php 跳转邮箱,实例详解JS简单实现点击跳转登陆邮箱功能的方法
本文主要介绍了JS简单实现点击跳转登陆邮箱功能的方法,涉及js针对hash表的遍历与页面元素属性动态操作相关实现技巧,需要的朋友可以参考下,希望能帮助到大家 前言 注册的过程中往往需要填写邮箱,并登陆 ...
- 易居主页点击登录跳转登录页面
易居主页点击登录跳转登录页面 UserController 中代码修改为 @Controller @RequestMapping("user") public class User ...
- jquery mobile的a标签点击无法跳转的问题
二次开发,遇到些小问题,嘿嘿,终于解决了. 搜出来的结果在此总结一下: 当我们的网站引用了jquery mobile的js后,点击页面的链接,你会发现页面无法跳转,因为jquery mobile默认是 ...
- swiper 定义放多少张图片,小程序swiper轮播图,自定义样式,两种方法:原生方法和bindchange方法;将点点改为数字(当前第几张 /总共几张);点击点点跳转当前图片...
一.点点部分 1.1.通过原生方法 (1)wxml文件 (2)wxss /* 轮播图部分 */ .swiperBar { width: 690rpx; height: 337rpx; margin: ...
- ios开发跳转safari_阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页
最近为了更好地接触移动Web 开发狠心购买了一台ipad mini(之前一直都是借同学的,借多了就不好意思了).拿来调试DeveMobile 与EaseMobile 主题 时候发现了不少问题,现在在一 ...
- 用session实现html登录页面跳转页面跳转页面跳转,js判断登录与否并确定跳转页面的方法...
这篇文章主要介绍了js判断登录与否并确定跳转页面的方法,涉及Ajax及session使用的技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了js判断登录与否并确定跳转页面的方法.分享给大家供 ...
- JS实现鼠标点击展开/隐藏表格行
<title>JS实现鼠标点击展开/隐藏表格行_网页代码站(www.webdm.cn)</title> <script language="javascript ...
- Vue 实现导航栏滑到顶部固定,滑动到相应位置导航栏有相应选中效果,点击导航跳转到对应位置
主要思路 导航栏固定 判断页面卷曲是否大于导航栏的offsetTop的值,超过了就证明导航栏到达了顶部,给导航栏添加固定样式的类名,注意:需要拿到导航栏固定前的offsetTop值,固定后的offse ...
最新文章
- 山西对口升学计算机分数线,2020年山西对口升学本科一批录取分数线是多少
- 改变电子商务行业业务的人工智能趋势
- NodeMCU快速上云集锦
- vue.js快速入门
- mysql的三大引擎是什么_MySQL常用三大存储引擎
- 100个必会的python脚本-Python 经典算法100及解析(小结)
- 基于FCN的图像语义分割
- Spring中的注解@Service @Component @Controller @Repository区别
- 监管落地,能否带来牙膏市场的日后繁荣?
- java 镶嵌创建线程_Java多线程——之一创建线程的四种方法
- 【amp;#9733;】SPF(Dijkstra)算法完美教程
- 泰山游记:道阻且长,活着走出
- 多系统对接的实现方案
- Issure: LookupError: unknown encoding: cp65001
- 35岁,你要逃离北上广?
- 服务器配置参数主要有哪些
- python360_Python实现360账号登录
- Date对象之获取和设置月份getMonthsetMonth
- php qcloud sdk weapp_qcloud/
- swiper——自动轮播
热门文章
- SpringMVC→简介、MVC、SpringMVC工作原理、Maven搭建第一个SpringMVC、请求参数接收、重定向、文件上传、AJAX异步访问、请求参数接收绑定JSON、@注解及传参
- 广东电网笔试_内容多,备考时间少?广东电网笔试如何准备?
- java tostring的用处_java中的toString什么意思?toString有什么用?
- 证书 vivo_vivo秦飞:真假5G不存在 NSA模式手机未来仍可用
- hud 3874 求区间内不同数字的和
- 2016蓝桥杯C++A:快速排序(详解版,很快掌握)
- 2018ACM上海大都会赛: A. Fruit Ninja(这绝对是道原题+随机)
- bzoj 1603: [Usaco2008 Oct]打谷机(拆点并查集)
- bzoj 3403: [Usaco2009 Open]Cow Line 直线上的牛
- 图像平均池化 利用pytorch对图像进行池化