标签：focus JS className tds 点击 跳转 var 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 

标签：focus,JS,className,tds,点击,跳转,var,td
来源： https://www.cnblogs.com/rabbit-lin0903/p/11141144.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。