用Mootools获得操作索引的两种方法分享


Posted in Javascript onDecember 12, 2011

我们先说一下第一种方法,(此方法为一位QQ好友提供,感谢此人,此人昵称是:exf)

<body> 
<ul>Title1 
<li>11111</li> 
</ul> 
<ul>Title2 
<li>22222</li> 
</ul> 
<ul>Title3 
<li>33333</li> 
</ul> 
<ul>Title4 
<li>44444</li> 
</ul> 
<script type='text/javascript'> 
ul=$$('ul'); 
ul.addEvent('click',function(){ 
alert(ul.indexOf(this)); 
}); 
</script>

其实除了上边的方法外还有一种方法也能得到索引值,看下边的例子:
<body> 
<ul>Title1 
<li>11111</li> 
</ul> 
<ul>Title2 
<li>22222</li> 
</ul> 
<ul>Title3 
<li>33333</li> 
</ul> 
<ul>Title4 
<li>44444</li> 
</ul> 
<script type='text/javascript'> 
ul=$$('ul'); 
ul.each(function($I,i){ 
$I.onclick=function(){ 
alert(i); 
}; 
}) 
</script>

两种方法孰优孰劣一看便知,第一种方法需要再次使用indexOf函数判断,而第二种方式直接是作为参数把索引值传递进去了,就不需要额外的计算了.因此如果您需要获取索引值得时候推荐使用第二种方法.

下边我写了一个手风琴插件用来演示两种方法在实际应用过程中的表现.

<style type="text/css"> 
ul,li{font-size:12px;font-family:arial;padding:0;margin:0;} 
ul{width:300px;line-height:24px;font-weight:bold;background-color:#C1C2C1;border-bottom:1px solid #fff;text-indent:10px;} 
li{list-style:none;font-weight:normal;background-color:#e1e1e1;} 
</style> 
</head> 
<body> 
<ul>Title1 
<li>11111</li> 
</ul> 
<ul>Title2 
<li>22222</li> 
</ul> 
<ul>Title3 
<li>33333</li> 
</ul> 
<ul>Title4 
<li>44444</li> 
</ul> 
<script type='text/javascript'> 
var Acc=new Class({ 
Implements:[Options,Events], 

options:{ 


$Boxtit:false 

}, 

initialize:function(options){//初始化构造函数 


this.setOptions(options);//?置options 


if(!this.options.$Boxtit){return false;} 



this.Core(); 


}, 


Core:function(){ 



$Boxtit=this.options.$Boxtit; 



$Boxmsg=$Boxtit.getElement('li'); 



$Boxmsg.setStyle("display","none"); 



$Boxtit.each(function($I,i1){ 




$I.onclick=function(){ 





//i2=$Boxtit.indexOf(this);console.log(i1+'|'+i2);//??的i1和i2???上都是索引值 





$Boxmsg.setStyle("display","none"); 





this.getElement('li').setStyle("display",""); 




}; 


}) 

} 
}); 
new Acc({$Boxtit:$$('ul')}); 
</script>

只不过在上边的插件中为了提高效率,因此我使用了this,这样比用索引找寻DOM效率更高一些.
Javascript 相关文章推荐
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
vue中实现移动端的scroll滚动方法
Mar 03 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
Sep 10 Javascript
Node.js API详解之 net模块实例分析
May 18 Javascript
Vue看了就会的8个小技巧
Jan 21 Vue.js
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 #Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 #Javascript
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 #Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 #Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 #Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 #Javascript
一个简单的js树形菜单
Dec 09 #Javascript
You might like
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
解析php如何将日志写进syslog
2013/06/28 PHP
ThinkPHP中I(),U(),$this-&gt;post()等函数用法
2014/11/22 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
PHP对象实例化单例方法
2017/01/19 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
详解AngularJS之$window窗口对象
2018/01/17 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
构建Python包的五个简单准则简介
2015/06/15 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
python中format函数如何使用
2020/06/22 Python
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
简单的JAVA编程面试题
2013/03/19 面试题
审计工作个人的自我评价
2013/12/25 职场文书
执行力心得体会
2013/12/31 职场文书
员工培训邀请函
2014/01/11 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python