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 相关文章推荐
点击广告后才能获得下载地址
Oct 26 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
May 17 Javascript
标准的js无缝滚动效果
Aug 30 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
bootstrap table实例详解
Jan 06 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 Javascript
vue单页缓存方案分析及实现
Sep 25 Javascript
vue编写简单的购物车功能
Jan 08 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.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
python str与repr的区别
2013/03/23 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
python设置中文界面实例方法
2020/10/27 Python
python中round函数保留两位小数的方法
2020/12/04 Python
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
解除劳动合同协议书范本
2014/09/13 职场文书
上下班时间调整通知
2015/04/23 职场文书
2019公司管理制度
2019/04/19 职场文书