Js面试题(三)--js点击弹出对应序号

<!-- 点击ul的五个li元素,分别弹出序号 -->

<ul>

  <li>1</li>

  <li>2</li>

  <li>3</li>

  <li>4</li>

  <li>5</li>

</ul>

第一种方法,当然也是最容易想到

第二种方法,采用外部参数函数调用

第三种方法,采用设置属性,点击事件,然后对应方法

第四种方法,分别让每个li对象设置index关联到onclick

代码如下:

<script>
        var oLis = document.getElementsByTagName(‘li‘);
        console.info(oLis);
        // for (var i = 0; i < oLis.length; i++) {
        //     oLis[i].onclick = (function(j) {
        //         return function() {
        //             alert(j + 1);
        //         }
        //     })(i);
        // }
        //立即执行函数
        for (var i = 0; i < oLis.length; i++) {
            (function(j) {
                oLis[i].onclick = function() {
                    alert(j);
                }
            })(i + 1);
        }
</script>

<script>
        var oLis = document.getElementsByTagName(‘li‘);
        console.info(oLis);

        function func(obj, i) {
            obj.onclick = function() {
                alert(i + 1);
            }
        }
        for (var i = 0; i < oLis.length; i++) {
            func(oLis[i], i)
        }
</script>

<script>
        var oLis = document.getElementsByTagName(‘li‘);
        console.info(oLis);

        function func(obj, i) {
            obj.onclick = function() {
                alert(i + 1);
            }
        }
        for (var i = 0; i < oLis.length; i++) {
            func(oLis[i], i)
        }
</script>

 <script>
        var oLis = document.getElementsByTagName(‘li‘);
        console.info(oLis);

        //设置index保存
        for (var i = 0; i < oLis.length; i++) {
            oLis[i].index = i;
            oLis[i].onclick = function() {
                alert(this.index + 1);
            }
        }
        //还可以用事件代理
</script>

就分享到这些,下次继续···

分享一下我的微信公众号,分享摄影与编程,谢谢大家的关注

原文地址:https://www.cnblogs.com/huihappy/p/10803532.html

时间: 2024-11-02 08:37:03

Js面试题(三)--js点击弹出对应序号的相关文章

【2017-05-21】WebForm跨页面传值取值、C#服务端跳转页面、 Button的OnClientClick属性、Js中getAttribute和超链接点击弹出警示框。

一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值,方式: href="地址?key=value&key=value"            用&可以实现传递多个值. 通过这种方式就把要传递的值传到要跳转的页面去了. 2.跨页面取值: 在跳转到的页面的C#代码服务端进行取值 用:  string value = Request["key"]; 二.

工作当中实际运用(3)——js原生实现鼠标点击弹出div层 在点击隐藏

function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display=="none") {//下面就简单了 不一一赘述了 divs.style.display="block" }else{ divs.style.display="none" } } js原生代码实现 鼠标点击 弹出 隐藏 div隐藏

js+css实现带缓冲效果右键弹出菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

[转]js中confirm实现执行操作前弹出确认框的方法

原文地址:http://www.jb51.net/article/56986.htm 本文实例讲述了js中confirm实现执行操作前弹出确认框的方法.分享给大家供大家参考.具体实现方法如下: 现在在删除或其它操作前弹出确定提示,我们有很多方法,最基本的就是利用js自带的函数confirm来操作了 最简单的用法如下: 鼠标事件使用confirm 复制代码 代码如下: <a href="#" onclick= "if(confirm( '是否确定! ')==false)r

jQuery点击弹出层,弹出模态框,点击模态框消失

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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 <!DOCTYPE html>

点击弹出弹性下拉菜单效果

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" /><meta name="

简单的jquery点击弹出背景变暗遮罩效果

工作中自己写了一个简单的jquery点击弹出背景变暗遮罩效果,非常好用......只把关键代码贴出来.并实现了点击空白处隐藏弹出层效果. js代码如下: <script type="text/javascript">  $(document).ready(function(){   $(".tkyy").click(function(event){      event.stopPropagation(); //停止事件冒泡    $(".ma

jquery之点击弹出图标环形菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

点击弹出居中带有透明遮罩层窗口

点击弹出居中带有透明遮罩层窗口:本章节介绍一下如何点击一个按钮实现弹出一个居中窗口,并且此窗口带有半透明的遮罩层效果,此效果在当下比较流行,当然还有更为复杂的实现方式,当然效果也更为绚丽,下面介绍的代码能够简单实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="htt