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 相关文章推荐
Javascript 个人笔记(没有整理,很乱)
Jul 07 Javascript
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
拖动table标题实现改变td的大小(css+js代码)
Apr 16 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
vue实现动态数据绑定
Apr 28 Javascript
JavaScript实现自动跳转文本功能
May 25 Javascript
微信小程序登录session的使用
Mar 17 Javascript
JavaScript Event Loop相关原理解析
Jun 10 Javascript
浅谈Vue的computed计算属性
Mar 21 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核心代码分析require和include的区别
2011/01/02 PHP
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
windows server 2008/2012安装php iis7 mysql环境搭建教程
2016/06/30 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
JQuery优缺点分析说明
2010/06/09 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
angular动态表单制作
2018/02/23 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
python安装gdal的两种方法
2019/10/29 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
法国在线药房:1001Pharmacies
2021/03/07 全球购物
测绘工程个人的自我评价
2013/11/23 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
文明演讲稿范文
2014/05/12 职场文书
小学校长开学致辞
2015/07/29 职场文书
JS中如何优雅的使用async await详解
2021/10/05 Javascript
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电