用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效率更高一些.

posted @   已經停更  阅读(1839)  评论(3)  编辑  收藏  举报
（评论功能已被禁用）
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
AI IDE Trae