以前用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. npm scripts构建

    管道(|)运算符会将一个命令的输出以流的方式作为另一个命令的输入. 重定向(>)运算符则会将输出重定向到文件. < 将文件内容输入到一个命令 在Unix中,还可以通过“&”运算符同 ...

  2. [BZOJ4199][NOI2015]品酒大会

    #131. [NOI2015]品酒大会 统计 描述 提交 自定义测试 一年一度的“幻影阁夏日品酒大会”隆重开幕了.大会包含品尝和趣味挑战两个环节,分别向优胜者颁发“首席品酒家”和“首席猎手”两个奖项, ...

  3. iPhone开发基础教程_第二章

    1.各个子文件夹的作用        Classes:                    编写的大多代码都保存在这里,其中包括所有的Objective-C类,可以在Classes文件夹下创建一些子 ...

  4. 客户端连接注册Ejabberd新用户

    今天需要使用客户端注册新用户,结果发现注册失败,在管理后台添加新用户成功.编译安装ejabberd就没有管了,经过翻论坛的到解决方法 在ejabberd.yml中. access: trusted_n ...

  5. iOS 面试总结 一

    iOS 开发工程师之面试总结一 好久没有出去面试了,大概一年的时间都很稳定,最近出去面试感觉心里特别慌,没有了当时的勇气了,其实还是感觉自己的准备不是特别的充分,这是主要原因. 这段时间待得太安逸没了 ...

  6. 关于Android中res目录strings.xml文件中的转义字符之笔录

    res目录strings.xml文件中的转义字符:         ------------------>     代表着一个汉字的位置:                        ---- ...

  7. Devexpress Ribbon

    http://www.cnblogs.com/liwei81730/archive/2011/12/21/2296203.html 可查看此处.

  8. oracle10g冷备份和恢复过程记录

    一.冷备份: 1.操作系统无法进入,需要利用启动盘进入winpe系统进行操作. 2.进入PE系统后,搜索所有盘符确认没有其它被作为oracle数据文件存放的目录,也就是说所有oracle有关的文件都存 ...

  9. qemu ubuntu for zynq（armhf）

    apt-get install qemu-user-static qemu-system mkdir qemu-ubuntu qemu-debootstrap --arch=armhf trusty ...

  10. JavaScript资源大全中文版（Awesome最新版--转载自张果老师博客）

    JavaScript资源大全中文版(Awesome最新版)   目录 前端MVC 框架和库 包管理器 加载器 打包工具 测试框架 框架 断言 覆盖率 运行器 QA 工具 基于 Node 的 CMS 框 ...