这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 遍历 ul 下的 li 点击弹出 li 的索引的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
首先我们需要一个 html 结构
- <div>
- <ul>
- <li>
- a
- </li>
- <li>
- a
- </li>
- <li>
- a
- </li>
- <li>
- a
- </li>
- <li>
- a
- </li>
- </ul>
- </div>
我们遍历 ul 下所有的 li 并添加点击事件,一般我们会在 for 循环里面添加点击事件,但是结果和我们所期盼不一样,那么是为什么呢????
接下来看看我们的 js 代码
- var li = document.getElementsByTagName('li');
- for (var i = 0; i < li.length; i++) { (function(Index) {
- li[i].addEventListener('click',
- function(e) {
- alert('I am link #' + Index);
- },
- false);
- })(i)
- }
我们实现了!!!
这样就是得来我们想要的效果点击相应的 li 得来相应的索引。
简单说一下实现的过程吧
- (function() {
- /* code */
- } ()); // 推荐使用这个
- (function() {
- /* code */
- })(); // 但是这个也是可以用的
这是我整理立调函数或自执行函数;
本质上我们是利用闭包的原理实现弹出的索引,我们立调函数传一个参数 Index,也就是我们的索引 i,在函数里面实现了闭包,
Index 会一直保留在作用域块内,这样我们再点击的时候,会调用作用域名内保存的索引,从而实现我们需要的功能;
我们几个简单的例子
- function num() {
- var i = 0;
- return function() {
- console.log(i++);
- }
- }
- var counter = num();
- console.log(counter()); // 0 console.log(counter()); // ??
- var counter1 = (function() {
- var i = 0;
- return {
- get: function() {
- return i;
- },
- set: function(val) {
- i = val;
- },
- increment: function() {
- return++i;
- }
- }
- } ());console.log(counter1);console.log(counter1.get()); // ?
- console.log(counter1.set(3)); // ?
- console.log(counter1.increment()); // ?
- console.log(counter1.increment()); // ?
- console.log(counter1);
- console.log(counter1.get()); // 0
- console.log(counter1.set(3)); // 3
- console.log(counter1.increment()); // 4
- console.log(counter1.increment()); // 5
以上所述是小编给大家介绍的 JS 遍历 ul 下的 li 点击弹出 li 的索引,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0531/331754.html