以前用jq 做过图片切换 滑动之类的特效现在想用js 试试是怎么一回事

jq图片切换的思路是用index()函数获取当前点击的按钮的索引然后根据索引值将对应索引的图片显示出来

于是查了一下js 是如何获取index的如下：

js代码

var ul = document.getElementById("list");

           var ul_child = ul.getElementsByTagName('li');

           for (var i = 0; i < ul_child.length; i++) {

               ul_child[i].index = i;

               ul_child[i].onclick = function(){

                   var j = this.index;

    　               alert("元素索引为" +this.index);

html代码

<body>

        <ul id="list">

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

        </ul>

</body>

【笔记】js获取当前点击元素的索引的更多相关文章

  1. js获取当前点击元素的索引

    以ul下的li元素为例:获取li的索引,代码如下: <ul id="list"> <li></li> <li></li> ...

  2. vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字

    点击当前标签给其添加class,兄弟标签class删除 然后获取当前点击元素的文字 演示地址: https://xibushijie.github.io/static/addClass.html &l ...

  3. 获取id 获取当前点击元素节点的任意 属性

    <a id="haveproces" onclick="fnProces(event)" dataid="{{x.id}}" clas ...

  4. js 获取当前点击的标签

  5. 通过this获取当前点击选项相关数据

    很多时候jquery只能或者应该回去一个集合.然后通过this获取触发时间的对象及相关属性 this.jq('#needsType').on("click", ".sel ...

  6. vue.js之获取当前点击对象(其实是套着vue的原生javascript吧，笑😊)

    转载请注明出处:http://www.cnblogs.com/meng1314-shuai/p/7455575.html 熟悉jquery的小伙伴应该都知道jquery获取当前点击对象是有多么的粗暴, ...

  7. vue中怎么实现获取当前点击对象this

    应用场景 在评论列表中,有很多条评论(通过循环出来的评论列表),评论的文字有多跟少,默认展示2行超出显示点击查看更多,,要点击查看更多对当前的这条评论进行全部评论展示! 问题描述 要是在传统的点击事件 ...

  8. jq获取当前点击的li是ul中的第几个？

    <script> var navulsize = $('.navul li').size();            var navulwidth = $('.navul li').wid ...

  9. jquery中获取当前点击对象

    jquery中获取当前点击对象的简单方法就是,在点击事件click中传入event对象 click(function(event)); 调用当前对象就是$(event.target);

随机推荐

  1. 最详细易懂的CRC-16校验原理（附源程序）(转)

    最详细易懂的CRC-16校验原理(附源程序) from:http://www.openhw.org/chudonganjin/blog/12-08/230184_515e6.html 最详细易懂的CR ...

  2. MVC中RenderBody的工作原理

    A)什么是RenderBody  根据MSDN的解释(http://msdn.microsoft.com/query/dev10.query?appId=Dev10IDEF1&l=EN-US& ...

  3. dede织梦cms-dede:autochannel标签

    按排序位置的获取单个栏目的链接信息 >>dede>> {dede:autochannel partsort='' typeid=''}{/dede:autochannel} & ...

  4. ajax请求action返回json数据

    1,服务端: HttpServletResponse response = ServletActionContext.getResponse(); response.setContentType(&q ...

  5. tornado 学习笔记15 _ServerRequestAdapter分析

         继承于HTTPMessageDeletegate,是HTTPMessageDeletegate的一种实现,用于处理请求消息. 15.1 构造函数 def __init__(self, ser ...

  6. C#判断数组是否为空

    string[] array=new[] { "1", "2", "3", "4", "5" }; ...

  7. <十三>JDBC_dbcp数据库连接池

    配置文件:jdbc.properties username=rootpassword=kkdriverClassName=com.mysql.jdbc.Driverurl=jdbc:mysql://1 ...

  8. Android事件分发传递

    一.与触摸事件有关的几个方法 boolean dispatchTouchEvent(MotionEvent ev); 接收到触摸事件时,是否分发事件到下面的View 返回true:分发触摸事件 返回f ...

  9. Python之路Day20-Django一对一(多)以及Ajax

    上节内容回顾 问题一:Django请求生命周期 -> URL对应关系(匹配) -> 视图函数 -> 返回用户字符串-> URL对应关系(匹配) -> 视图函数 -> ...

  10. *HDU 1757 矩阵乘法

    A Simple Math Problem Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...