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

发布于 2016-12-28 09:36:00 | 40 次阅读 | 评论: 0 | 来源: 网友投递

MooTools JavaScript WEB应用框架

MooTools是一个简洁，模块化，面向对象的开源JavaScript web应用框架。它为web开发者提供了一个跨浏览器js解决方案。在处理js、css、html时候。它提供了一个比普通js更面向对象的documentAPI。

用Mootools获得操作索引的两种方法分享，需要的朋友可以参考下。
我们先说一下第一种方法,(此方法为一位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效率更高一些.

最新网友评论 共有(0)条评论发布评论返回顶部

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

MooTools JavaScript WEB应用框架

后端技术

前端技术

数据库

热门框架

常用IDE

其他