ES6函数实现排它两种写法解析


Posted in Javascript onMay 13, 2020

排它思想:清除其它所有的没有选中元素的样式, 只设置当前选中元素的样式

html代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  
</head>
<body>
<ul>
  <li class="current">我是第1个li</li>
  <li>我是第2个li</li>
  <li>我是第3个li</li>
  <li>我是第4个li</li>
  <li>我是第5个li</li>
  <li>我是第6个li</li>
  <li>我是第7个li</li>
  <li>我是第8个li</li>
</ul>

</body>
</html>

css代码

<style>
    *{
      margin: 0;
      padding: 0;
    }
    ul{
      list-style: none;
      margin: 100px auto;
      width: 300px;
      height: 400px;
      border: 1px solid #000;
    }
    ul>li{
      font-size: 30px;
      font-weight: bold;
      margin-bottom: 10px;
      cursor: default;
    }

    .current{
      background-color: brown;
    }
  </style>

JavaScript代码

<script>
  /*
  // es6之后的写法
  let items = document.querySelectorAll("li");
  let previousIndex = 0;
  for (let i = 0; i < items.length; i++) {
    // let currentItem = items[i];
    items[i].onclick = function () {
      items[previousIndex].className = "";
      this.className = "current";
      previousIndex = i;
      // console.log(previousIndex);
    };
  }
  */

  // es6之前的写法
  var items = document.querySelectorAll("li");
  var previousIndex = 0;
  for (var i = 0; i < items.length; i++) {
    (function (index) {
      items[index].onclick = function () {
        items[previousIndex].className = "";
        this.className = "current";
        previousIndex = index;
      };
    })(i);
  }
</script>

运行效果

ES6函数实现排它两种写法解析

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 遮照层实现代码
Mar 31 Javascript
基于Jquery的简单图片切换效果
Jan 06 Javascript
JS实现一键回顶功能示例代码
Oct 28 Javascript
jquery等待效果示例
May 01 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 #Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 #Javascript
原生JS实现汇率转换功能代码实例
May 13 #Javascript
JavaScript Tab菜单实现过程解析
May 13 #Javascript
JQuery事件冒泡和默认行为代码实例
May 13 #jQuery
element中el-container容器与div布局区分详解
May 13 #Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
May 13 #Javascript
You might like
php URL跳转代码 减少外链
2011/06/25 PHP
php实现encode64编码类实例
2015/03/24 PHP
Joomla开启SEF的方法
2016/05/04 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
django+mysql的使用示例
2018/11/23 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
python3安装crypto出错及解决方法
2019/07/30 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
matplotlib实现显示伪彩色图像及色度条
2019/12/07 Python
Python如何获取文件指定行的内容
2020/05/27 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
七年级政治教学反思
2014/02/03 职场文书
学习保证书范文
2014/04/30 职场文书
党建工作整改措施
2014/10/28 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
《给予树》教学反思
2016/03/03 职场文书
MySQL 语句执行顺序举例解析
2022/06/05 MySQL