ES6函数实现排它两种写法解析
排它思想：清除其它所有的没有选中元素的样式, 只设置当前选中元素的样式
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中Array.find()和findIndex()函数的用法详解
ES6为Array增加了find(),findIndex函数. find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined. findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1. 他们的都是一个查找回调函数. [1, 2, 3, 4].find((value, index, arr) => { }) 查找函数有三个参数. value:每一次迭代查找的数组元素. index:每一次迭代查找的数组元素索引. arr:被查找的数组. 例: 1.查找
-
JavaScript ES6箭头函数使用指南
胖箭头函数(Fat arrow functions),又称箭头函数,是一个来自ECMAScript 2015(又称ES6)的全新特性.有传闻说,箭头函数的语法=>,是受到了CoffeeScript 的影响,并且它与CoffeeScript中的=>语法一样,共享this上下文. 箭头函数的产生,主要由两个目的:更简洁的语法和与父作用域共享关键字this.接下来,让我们来看几个详细的例子. 新的函数语法 传统的JavaScript函数语法并没有提供任何的灵活性,每一次你需要定义一个函数时,你都必须
-
ES6知识点整理之函数数组参数的默认值及其解构应用示例
本文实例讲述了ES6知识点整理之函数数组参数的默认值及其解构应用.分享给大家供大家参考,具体如下: 在ES6中, 函数的参数也可以使用解构赋值和默认值的设置,下面我们来看下 在ES6之前设置函数默认值的写法 function test(x,y) { x = x || 12; y = y || 22; console.log(x,y); } test(); // 12 22 test(1,2) // 1 2 在ES6中给函数参数赋默认值 function test(x=12, y=22) { co
-
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
本文实例讲述了ES6学习笔记之字符串.数组.对象.函数新增知识点.分享给大家供大家参考,具体如下: 1.模板字符串 反引号`` 内用于输入格式化的字符串文本,在``内可以将表达式用${}包含起来 let str=` <!DOCTYPE html> <html lang="en"> <body> <div> <p class="pClass">格式化字符串</p> </div> <
-
ES6中Array.includes()函数的用法
在ES5,Array已经提供了indexOf用来查找某个元素的位置,如果不存在就返回-1,但是这个函数在判断数组是否包含某个元素时有两个小不足,第一个是它会返回-1和元素的位置来表示是否包含,在定位方面是没问题,就是不够语义化.另一个问题是不能判断是否有NaN的元素. const arr1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', NaN] console.log('%s', arr1.indexOf(NaN)) 结果:
-
ES6知识点整理之函数对象参数默认值及其解构应用示例
本文实例讲述了ES6知识点整理之函数对象参数默认值及其解构应用.分享给大家供大家参考,具体如下: 同函数数组参数一样,函数的对象参数的默认值和解构过程整理 函数对象参数的默认值与解构的形式 此处使用箭头函数来处理 : (({x,y})=>{ console.log(x, y); // // undefined undefined })({}); (({x=1,y=2})=>{ console.log(x,y); // 1 2 })({}); (({x=3, y=4}={})=>{ con
-
es6数组的flat()，flatMap()函数用法实例分析
本文实例讲述了es6数组的flat(),flatMap()函数用法.分享给大家供大家参考,具体如下: 数组的成员有时还是数组,Array.prototype.flat()用于将嵌套的数组"拉平",变成一维数组.该方法返回一个新数组,对原数据没有影响. [1, 2, [3, 4]].flat() // [1, 2, 3, 4] 上面代码中,原数组的成员里面有一个数组,flat()方法将子数组的成员取出来,添加在原来的位置. flat()默认只会"拉平"一层,如果想要&
-
es6函数之箭头函数用法实例详解
本文实例讲述了es6函数之箭头函数用法.分享给大家供大家参考,具体如下: es6允许使用"箭头"(=>)定义函数. var f = v => v // 等同于 var f = function(v) { return v } 如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分. var f = () => 5 // 等同于 var f = function() { return 5 } var sum = (num1, num2) => num1
-
ES6函数实现排它两种写法解析
排它思想:清除其它所有的没有选中元素的样式, 只设置当前选中元素的样式 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li class="current"&g
-
C++深浅拷贝和string类的两种写法详解
目录 一.深浅拷贝 二.string类的两种写法 1.传统写法 2.现代写法 总结 一.深浅拷贝 拷贝这个词对于我们来说应该不陌生,比如我们平常的复制和粘贴就是拷贝:但是如果把拷贝这个词放到C++中来说就有一些复杂了,我们先来看一下什么是浅拷贝: 下面用字符串类来模拟实现. class Astring { public: //构造函数 Astring(const char* str = "") { _str = new char[strlen(str) + 1]; strcpy(_st
-
JavaScript判断变量是否为undefined的两种写法区别
工作中我们经常需要判断某个变量/属性是否为undefined.通常有两种写法 复制代码 代码如下: // 方式1 typeof age === 'undefined'; // 方式2 age === undefined 这两种写法有什么区别吗? 应该使用哪一种呢?看看下面的例子 复制代码 代码如下: typeof age === 'undefined'; // true 标识符 age 没有声明过,输出true. 再看另一个例子 复制代码 代码如下: age === undefined; //
-
ASP.NET MVC中URL地址传参的两种写法
一.url地址传参的第一种写法 1.通过mvc中默认的url地址书写格式:控制器/方法名/参数 2.实例:http://localhost:39270/RequestDemo/Index/88,默认参数名为id所以名称为id. 如果使用其他名称,后台是无法读取的会报错 二.url地址传参的第二种写法 1.使用?加参数名=参数值的写法,如果有多个参数使用&来连接 http://localhost:39270/RequestDemo/Index?id=88&name=%E5%BC%A0%E4%
-
ThinkPHP中Widget扩展的两种写法及调用方法详解
本文实例讲述了ThinkPHP中Widget扩展的两种写法及调用方法.分享给大家供大家参考,具体如下: Widget扩展一般用于页面组件的扩展,在页面根据需要输出不同的内容,下面介绍一下ThinkPHP中Widget的两种写法及调用 写法一: ArticlWidget.class.php文件: class ArticleWidget extends Widget { /** * * @param array $data * @return type * 调用方法:{:W('ArticleList
-
微信小程序 接入腾讯地图的两种写法
最近在写微信小程序,遇到了一些坑,在网上也查了好多,感觉都没有我想要的答案, 刚处理了这个地图的问题,在这里总结下,希望可以帮助大家. 在微信小程序中,腾讯地图的接入其实是有两种方式的,第一种调用腾讯本身的地图,第二种是使用插件 ma-route 一.调用腾讯本身的地图 实现结果如下图: 这个非常简单,而且用的人也很多, 只需要调用两个地图的api. 就是上边的两个.当然调用openLocation的时候你首先要调用getLocation授权 需要你在app.json里配置信息,如下: 在你需要
-
详解Python单元测试的两种写法
目录 一.前言 二.实现 1.doctest 2.unittest 一.前言 python的两个单元测试包分别是 doctest 和 unittest,这两个包的使用起来各有长处,适用于不同的场景 doctest:直接写在方法体中,利用了 python 动态语言的特性,书写方式简单明了,前提是项目不要太大,如果项目复杂代码量大,再加上写在方法体中的单元测试,整体就会看起来有些臃肿,因此 doctest 适用于代码量不大的普通项目 unittest:一般写在独立文件中,与 spring 的单元测试
-
React Router6.x路由表封装的两种写法
目录 一. 标签形式 二. 对象形式 三. 实现一个经典的左目录右内容布局结构(使用对象路由方式) 一. 标签形式 src 文件夹下创建一个 routers 文件夹,用于存放路由表 src/routers 文件夹下创建一个 index.js 文件,用于设置路由表 import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"; import App from "../App"; im
-
Java sort集合排序的两种方式解析
这篇文章主要介绍了Java sort集合排序的两种方式解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Comparable和Comparator public static <T> void sort(List<T> list); 将集合中的数据按照默认规则进行排序 (我们在自己的类里面实现Comparabl接口方法compareTo) public static <T> void sort(List<T&g
-
spring级联属性赋值的两种方式解析
这篇文章主要介绍了spring级联属性赋值的两种方式解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Car.java package com.gong.spring.beans; public class Car { private String name; public String getName() { return name; } public void setName(String name) { this.name = name