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 相关文章推荐
最简单的jQuery程序 入门者学习
Jul 09 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
JavaScript代码调试方法实例小结
Jan 05 Javascript
vue实现路由监听和参数监听
Oct 29 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
详解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 七大优势分析
2009/06/23 PHP
php 正则匹配函数体
2009/08/25 PHP
PHP新手入门学习方法
2011/05/08 PHP
php中文验证码实现方法
2015/06/18 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
禁止F5等快捷键的JS代码
2007/03/06 Javascript
javascript 一些用法小结
2009/09/11 Javascript
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
js命名空间写法示例
2015/12/18 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
django 自定义用户user模型的三种方法
2014/11/18 Python
处理Python中的URLError异常的方法
2015/04/30 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
Python函数中不定长参数的写法
2019/02/13 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
Python3分析处理声音数据的例子
2019/08/27 Python
Python实现随机爬山算法
2021/01/29 Python
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
倩碧英国官网:Clinique英国
2018/08/10 全球购物
计算机学生的自我评价分享
2014/02/18 职场文书
搞笑创意广告语
2014/03/17 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang