用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获得操作索引的两种方法分享

    我们先说一下第一种方法,(此方法为一位QQ好友提供,感谢此人,此人昵称是:exf) 复制代码 代码如下: <body> <ul>Title1 <li>11111</li> </ul> <ul>Title2 <li>22222</li> </ul> <ul>Title3 <li>33333</li> </ul> <ul>Title4 <

  • 指针操作数组的两种方法(总结)

    指针操作数组,方法一是p+index,方法二是p[index],第二种方法跟数组访问方法是一样的. 数组引用返回的是数组的第一个元素的指针地址. 可以将指针指向数组的任意元素,然后从那里开始访问,只要注意不越界就行了,这说明数组只是将元素连续堆叠,并不需要也没有其他的配置信息存放在数组元素之外的地方或者在头尾等等任何地方,都没有,他只是连续的存储而已. #include <iostream> using namespace std; int main() { const int ARRAY_L

  • C语言实现倒置字符串的两种方法分享

    C语言实现倒置字符串的两种方法分享

    目录 前言 一.题目 二.思路讲解 三.代码实现 四.代码总结 五.第二种方法倒置字符串 六.总结 前言 今天在牛客网上刷了一道题,我感觉挺有意义的,现在我就分享给大家,并且告诉大家解题思路. 一.题目 事例: 输入下列字符: I like beijing. 输出的字符: beijing. like I 二.思路讲解 1.设立一个数组存放输入的字符串 2.将其中每个单词进行逆置 得到 I ekil .gnjieb 3.再将字符串逆置  得到beijing.like I 三.代码实现 1.设立一个

  • gridview实现服务器端和客户端全选的两种方法分享

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="

  • Android中获取状态栏高度的两种方法分享

    前言 最近在做一个关于FAB的功能的时候需要获取状态栏的高度,在网上查了很多种方法,下面是选出的比较合理的两个方法.主要参考stackoverflow的这篇问答:http://stackoverflow.com/questions/3407256/height-of-status-bar-in-android 方法一: private double getStatusBarHeight(Context context){ double statusBarHeight = Math.ceil(25

  • js获取GridView中行数据的两种方法 分享

    第一种方法: 复制代码 代码如下: function submitData() {    var tb = document.getElementById(IDArray[0]);   //获取服务器控件GridView的ID    if (tb)     {    var rows = tb.rows;    for (var i = 1; i < rows.length; i++) {        var id = rows[i].cells[1].innerText;        va

  • Linux/Unix下安装Perl模块的两种方法分享

    方法一.手工安装的步骤 从CPAN下载了DBI模块1.13版的压缩文件DBI-1.13.tar.gz,假设放在/usr/local/src/下. cd /usr/local/src 解压缩这个文件: tar xvzf DBI-1.13.tar.gz 这时会新建一个DBI-1.13的目录. cd DBI-1.13 生成makefile: perl Makefile.PL 建立模块 make 测试模块 make test 如果测试结果报告"all test ok",您就可以放心地安装编译好

  • php中模拟POST传递数据的两种方法分享

    方法1 复制代码 代码如下: $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, "http://192.168.1.135/turntable/get_jump.php"); curl_setopt($ch, CURLOPT_HEADER, 0); curl_setopt($ch, CURLOPT_POSTFIELDS, $array); curl_exec($ch); curl_close($ch); 方法2 复制代码 代码如下: $d

  • javascript中取前n天日期的两种方法分享

    方法一: 复制代码 代码如下: var d = new Date(); d = new Date(d.getFullYear(),d.getMonth(),d.getDate()-n); 方法二: 复制代码 代码如下: var now = new Date(); now.setTime(now.getTime()-n*24*60*60*1000);

  • smarty实现PHP静态化的两种方法分享

    方法一: 复制代码 代码如下: <?php require_once("./config/config.php"); ob_start(); $id=$_GET[id]; $sql="select * from table_name where id='$id'"; $result=mysql_query($sql); $rs=mysql_fetch_object($result); $smarty->assign("showtitle&quo

随机推荐