点击一个Ul里面的5个li,分别弹出他们的序号

方法一:

var oLi = document.querySelector("li");
for(var i=0; i<oLis.length; i++){
    oLis[i].onclick = (function(j){
        return function(){
            alert(j);
        }
    })(i);
}

方法二:

var oLi = document.querySelector("li");
for(var i=0; i<oLi.length; i++){
    (function(j){
        oLi[j].onclick = function(){
            alert(j);
        };
    })(i);
}

方法三:

var oLi = document.getElementsByTagName(‘li‘);
    function func(obj,i){
        obj.onclick = function(){
            alert (i);
        }
    }
    for(var i = 0; i<oLi.length; i++){
        func(oLi[i], i);
    }

方法四:

var oLi = document.getElementsByTagName(‘li‘);
for(var i=0; i<oLi.length; i++){
    oLi[i].setAttribute("onclick", "alert("+i+");");
}

方法五:

for(var i=0; i<oLi.length; i++){
    oLi[i].index = i;
    oLi[i].onclick = function(){
        alert(this.index);
    }
}

方法六:

<body>
    <input type="button" value="按钮1">
    <input type="button" value="按钮2">
    <input type="button" value="按钮3">
    <script type="text/javascript">
        var btns = document.getElementsByTagName("input");
        for (let i = 0; i < 3; i++) {
            btns[i].onclick = function () {
                console.log("我是第" + (i) + "个按钮");
            };
        }
    </script>
</body>

原文地址:https://www.cnblogs.com/haohao-a/p/10960848.html

时间: 2024-11-02 13:59:18

点击一个Ul里面的5个li,分别弹出他们的序号的相关文章

点击一个ul的五个li元素,分别弹出他们的序号,怎么做?

方法1 : for(var i=0; i<oLis.length; i++){ oLis[i].onclick = (function(j){ return function(){ alert(j); } })(i); } 这样的话, 给每个li绑定onclick事件时, 其实绑的是一个立即执行函数, 这个立即执行函数的参数是i, 因为它是立即执行的, 循环时已经把i的值赋给了li的onclick事件, 所以在外部函数里的i改变后并不会影响i的值. 另一种实现方法:(立即执行函数) for(va

分享一个Winform里面的HTML编辑控件Zeta HTML Edit Control,汉化附源码

我们知道,Web开发上有很多HTML的编辑控件,如FCKEditor.CKEditor.kindeditor等等,很多都做的很好,而虽然Winform里面有WebBrowser控件,但是默认这个控件是不允许编辑内容的,可以显示网页而已.Winform开发里面,有些使用RichTextBox控件来编辑HTML,也有一些结合WebBrowser控件来实现内容的编辑,其中我觉得做的最好的应该是Zeta HTML Edit Control(http://www.codeproject.com/Artic

大神语录1 如何滑动fragmentmanager里面一个fragment里面的viewgroup---dispatchTouchEvent 、onInterceptTouchEvent 、onTouchEvent

问题:如下图 系统如何知道用户滑动的是A(黑框内的page)还是B(红框内的fgm) 答案: -dispatchTouchEvent .onInterceptTouchEvent .onTouchEvent 问题解析: 这个可以说是安卓内的事件处理问题,首先介绍一下大神说的这三个事件] android系统中的每个View的子类都具有下面三个和TouchEvent处理密切相关的方法: 1)public boolean dispatchTouchEvent(MotionEvent ev)  这个方法

PHP递归方式把一个数组里面的null转换为空字符串”的方法

在一些接口的调用中,直接查询数据库出来的字段可能为null字段,但是为了简便前端的判断,需要把null转换成空字符串'',这个时候就需要递归的方式进行.直接上代码如下: //递归方式把数组或字符串 null转换为空''字符串 public function _unsetNull($arr){ if($arr !== null){ if(is_array($arr)){ if(!empty($arr)){ foreach($arr as $key => $value){ if($value ===

JS中创建10个a标签,点击弹出对应的序号

<script type="text/javascript"> for(var i=0;i<10;i++){ (function(i){ var a=document.createElement('a'); a.innerHTML=i+'<br>'; document.body.appendChild(a); a.addEventListener('click',function(e){ e.preventDefault(); //取消默认事件,指a标签

怎样分割一个多页面的PDF文件

我们办公族在工作中最苦恼的就是遇到格式容量过大的文件,或者是别人发送过来的PDF文件,不仅文件大而且内容并不都是我们想要的.所以我们还要进行二次处理,但是PDF文件不能直接编辑,还要借助工具来完成.今天小编就给大家分享一个好用的pdf分割工具,希望可以帮助大家.使用工具:迅捷PDF转换器1.如果大家以前没有使用过这种类似的工具,可以先在浏览器上面搜索PDF转换器,找到相对用的网址,下载并安装到电脑桌面上.2.安装完成后,在桌面上打开,进入软件首页面,可以看到页面上方有很多功能,这时候我们就选择我

vbox里面的Ubuntu虚拟机与主机win7之间设置共享文件夹

有时候我们希望虚拟机和主机之间进行通信,例如传一些文件.那么设置共享文件夹就是一种很好的方式. 这里我的主机是win7系统,vbox里面的虚拟机是Ubuntu. 1.首先安装vbox的VBOXGuestAddition.iso. 在vbox中点击“设备”->“安装增强功能”. Ubuntu中会弹出安装界面,安装结束需要重启Ubuntu. 安装这个东西可以解决虚拟机全屏的问题,以前安装过这里就跳过了. 2.然后我们在win7桌面上创建一个文件夹,例如vbox-share. 再在Ubuntu虚拟机里

js常见问题之为什么点击弹出的i总是最后一个

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>for</title> <style type="text/css"> li{ height:50px; } </style> </head> <body> <ol> <l

一个基于jQuery的弹出层插件XYTips

效果预览:http://www.juheweb.com/js/tc/80.html 标签: jQuery [1].[代码] [JavaScript]代码 跳至 [1] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58