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



相关阅读:
asp下用datediff实现计算两个时间差的函数
用 JavaScript 迁移目录
修复XP不能更新的故障
PHP的SQL注入过程分析
更新你的联机丛书
微软商店确认Windows 7包装设计图
HTML5视频标签全属性详解
让Asp.NET的DataGrid可排序、可选择、可分页
C#正则用法两例
PHP中几个常用的魔术常量
容器高度100%的绝对定位布局
Ajax+PHP 边学边练之四 表单
一个javascript脚本写的俄罗斯方块 (2)Russia.js
JavaScript是什么?
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4