用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 相关文章推荐
javascript 数组学习资料收集
Apr 11 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
深入理解vue路由的使用
Mar 24 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
JavaScript实现点击自制菜单效果
Feb 02 Javascript
整理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
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
jquery 插件学习(二)
2012/08/06 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
Python中的sort()方法使用基础教程
2017/01/08 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
Java和Javasciprt的区别
2012/09/02 面试题
C# .NET面试题
2015/11/28 面试题
物流管理专业职业生涯规划书
2014/01/06 职场文书
八一建军节感言
2014/02/28 职场文书
职工小家建设活动方案
2014/08/25 职场文书
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS