以前用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. java.lang.OutOfMemoryError: PermGen space错误解决方法

    1. MyEclipse 中报 PermGen space       window--> preferences-->Myclipse-->Servers-->Tomcat- ...

  2. BZOJ3438 小M的作物（最小割）

    题目 Source http://www.lydsy.com/JudgeOnline/problem.php?id=3438 Description 小M在MC里开辟了两块巨大的耕地A和B(你可以认为 ...

  3. SQL执行效率和性能测试方法总结

    对于做管理系统和分析系统的程序员,复杂SQL语句是不可避免的,面对海量数据,有时候经过优化的某一条语句,可以提高执行效率和整体运行性能.如何选择SQL语句,本文提供了两种方法,分别对多条SQL进行量化 ...

  4. QuartZ Cron表达式

     Cron Expressions cron的表达式是字符串,实际上是由七子表达式,描述个别细节的时间表.        Seconds        Minutes        Hours     ...

  5. noi往届题目泛做

    noi2015 Day1 t1 程序自动分析  离散化+并查集 t2 软件包管理器  裸树链剖分 t3 寿司晚宴  状压dp Day2 t1 荷马史诗 哈夫曼多叉树 t2 品酒大会 后缀数组按照hei ...

  6. API，框架，组件

    API 是什么,API 就是通过提供方便使用的接口来执行它实现的功能. 用一个手电筒来作比喻: 手电筒的按钮就是接口,按下按钮就是它的方便的使用方式,发光就是它的功能,在这里我们可以称这个手电筒是个 ...

  7. 更改机器名后，打开TFS提示工作区错误的处理

    1,打开vs下的"开发人员命令提示"2,按下面格式输入命令:tf workspaces 查看, 假设显示如下: C:\Program Files (x86)\Microsoft V ...

  8. The Practical Guide to Empathy Maps: 10-Minute User Personas

    That’s where the empathy map comes in. When created correctly, empathy maps serve as the perfect lea ...

  9. Codeforces Round #384 (Div. 2) 734E Vladik and cards

    E. Vladik and cards time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  10. Akka-remote使用入门

    在上一篇文章中讲了akka-actor的简单使用,那主要是展现了akka在一台机器上的并发应用,这一篇接着介绍akka-remote使用,简单了解akka在不同机器上的并发应用.我们知道,在一台机器上 ...