ES6前后实现排它的两种写法

最新推荐文章于 2022-08-30 23:30:53 发布
最新推荐文章于 2022-08-30 23:30:53 发布
阅读量151 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
转载请说明文章详细出处
本文链接：https://blog.csdn.net/weixin_44120487/article/details/105850010
版权

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

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>

运行效果

TomHe789
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6函数实现排它两种写法解析
10-15
接下来，我们将关注JavaScript代码，它有两个不同的实现方式，分别对应于ES6之后和之前的写法。 **ES6之后的写法** ```javascript let items = document.querySelectorAll("li"); let previousIndex = 0; for ...
es6数组排序
z17864151193的博客
03-29 7975
js数组倒序reverse var a = ["前端开发博客","专注前端开发","数组"]; //创建数组 alert(a.reverse()); //颠倒顺序并输出 对象数组按属性排序 一个对象数组，单个对象里某个属性是数字，需要按这个属性的数字大小升序排序。 如下代码是一个对象数组按照age属性排序的方法： var str=[ {name:"a",age:50}, {name:"b",age:20}, {name:"c",age:40}, {name:"d",age:
撩课-Web架构师养成系列第一篇
weixin_33885676的博客
11-25 251
前言 Web架构师养成系列共15篇，每周更新一篇，主要分享、探讨目前大前端领域（前端、后端、移动端）企业中正在用的各种成熟的、新的技术。 部分文章也会分析一些框架的底层实现，让我们做到知其然知其所以然。 本篇文章阅读需要时长：约15分钟 一、ECMAScript 6/7/8简介 ECMAScript 6.0，简称ES6，第一个版本是在2015年6月进行发布，所以也称之为《ECMAScript ...
js ---实现排他效果
不想起床
10-12 604
// 排他功能 let btn = document.getElementsByTagName('button'); for (let i = 0; i < btn.length; i++) { btn[i].onclick = function () { // 在显示当前按钮的时候，先干掉其它的按钮样式 f...
ES6个人总结
weixin_45658984的博客
04-27 386
ES6个人总结一.模板字符串基本用法和好处二.解构赋值1.对象解构2.数组解构3.函数的参数解构三.函数rest参数四.箭头函数1.基本用法2.与普通匿名函数的区别五.Promise1.基本用法2.传参3.错误处理4.作用六.async(其实是Promise的语法糖)1.用法2.错误处理七.class 类1.用法2.添加静态方法3.类的继承(extends)八.对象扩展运算符(...)作用 一.模...
操作元素排他算法以及三个实用的例子
shen_yk的博客
11-21 831
操作元素 排他算法 如果有同一组元素,我们想要某一个元素实现某种样式 ,需要用到循环的排他思想算法: 1.所有元素全部清除样式(干掉其他人) 2.给当前元素设置样式( 留下我自己) 3.注意顺序不能颠倒,首先干掉其他人,再设置自己 例子 点击按钮 按钮背景颜色改变 再次点击其他的 再次改变 并且之前点击的按钮变回原来的颜色 var btns = document.getElementsByTag...
ES6学习之变量的两种命名方法示例
08-29
在ES6中，JavaScript引入了两种新的变量声明方式：`let`和`const`，以增强语言的可读性和安全性。这些新特性是ES6的重要组成部分，旨在解决ES5中的某些问题，例如变量提升（hoisting）和作用域限制。 1. `let`声明...
ES6 Object属性新的写法实例小结
10-16
主要介绍了ES6 Object属性新的写法,结合实例形式总结分析了ES6中object属性的常见简化写法,需要的朋友可以参考下
React中ES5与ES6写法的区别总结
08-30
在 React 中，ES5 和 ES6 两种写法是开发者最常用的两种方式。这两种方式有着很大的区别，了解这两种方式的区别对开发者来说非常重要。 首先，lets 看看模块引用。在 ES5 中，如果使用 CommonJS 标准，引入 React ...
前端学习（834）：排他思想
歌谣的博客
04-13 461
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen...
前端学习第二十二课（Web_API-排他、属性、节点操作）
damadashen的博客
04-28 365
目录 1.1 排他操作 1.2 自定义属性操作 1.2.1 获取属性值 1.2.2 设置属性值 1.2.3 移除属性 1.2.4 H5自定义属性 1.3 节点操作 1.3.1 节点概述 1.3.2 节点层级 1.3.3 父级节点 1.3.4 子节点 1.3.5 兄弟节点 1.3.6 创建节点 1.3.7 添加节点 1.3.8 简单留言板案例 1.1 排他操作 1）排他思想： 如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法： 所有.
es6封装一个组件---按钮组 （第一篇）
张大晴的博客
10-31 3707
写的比较简单，还在学习中，欢迎大家指教。 知识点： WebComponent   CustomElementRegistry - customElements 对象   该接口提供注册自定义元素和查询已注册元素的方法   customElements.define(name, constructor, options)   name：自定义元素名称，注意：自定义的元素名称必须是使用 -...
将字符串中的字母全部转换为大写字母/小写字母
TomHe789
04-03 6338
<script> let str = "Hello World!"; // 将字符串的字符全部转换为小写字符 function lowerCase(str) { let arr = str.split(""); let newStr = ""; //通过for循环遍历数组 for (let i = ...
JavaScript获取图片的file对象数据（不通过input）
TomHe789
08-30 3856
JavaScript不通过input标签，来获取图片的file对象，实现图标库功能
数组中的map方法
TomHe789
04-24 2882
作用：通过指定函数对数组进行处理，并将处理后的结果以新数组的形式返回 注意点：不会改变原数组，只是将处理后的结果以新数组的形式返回 参数：该方法可以接收两个参数 第一个参数是函数，数组中的每个元素都会执行该函数，并且是必须要传的 传入函数的三个参数 currentValue 为当前元素的值 必传 index 当前元素的索引 可以省略 arr 当前数组 也可以省略 第二个参...
原生JS实现过渡效果的轮播图
TomHe789
06-27 2642
说明 刚开始是打算使用jQuery中的fadeIn和fadeOut方法来完成这种带有渐变效果的轮播图的，由于好长时间没有碰jQuery （实力不允许???? ） ，所以在用jQuery尝试了一下并且失败了之后，就打算使用原生的JavaScript来完成了。 实现原理 我首先在CSS中定义好了两个类，一个类是用于实现轮播时动画消失的效果，另一个类则是用于实现轮播时动画出现的效果；然后用到了JavaScript中关于类的基本的两个方法：add()和remove()；通过这两个来完成对类的增删，从而展现出轮播的
原生JS实现简单的汇率转换问题
TomHe789
05-03 1532
html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http...
JavaScript中的oncopy事件
TomHe789
05-09 975
作用：当用户拷贝添加了oncopy事件的元素时触发 使用方式：直接在HTML标签中添加该事件，通过JavaScript为指定元素添加该事件 提示：如果想要禁止复制某个元素的内容，可以在该事件的函数中添加return: false;，禁止浏览器的默认行为 例如： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>oncopy事件&..
JSON.parse()和JSON.stringfy()使用注意事项
TomHe789
06-11 850
JSON.parse() 作用：用于解析JSON字符串，返回该字符串所描述的JavaScript值或对象。 注意：被解析的json字符串必须遵守JSON规范，也就是字符串整体单引号包裹双引号 例如： 若被解析的字符串为对象，则**对象的键（key）必须使用双引号包裹，如果对象的值（value）**为String类型则也需使用双引号包裹，字符串整体则用单引号包裹：'{"name": "tomhe", "age": 21}' 若被解析的字符串为数组，并且数组中的元素为字符串类型，则数组中的元素必须使用双引号包
es6 forEact写法
最新发布
11-25
ES6中的forEach()方法可以用于遍历数组中的每个元素，并对每个元素执行回调函数。以下是ES6 forEach()方法的示例： ```javascript let arr = [1, 2, 3, 4, 5]; arr.forEach((item, index) => { console.log(`元素 ${item} 的索引是 ${index}`); }); ``` 上述代码将输出以下内容： ``` 元素 1 的索引是 0 元素 2 的索引是 1 元素 3 的索引是 2 元素 4 的索引是 3 元素 5 的索引是 4 ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值