使用for of 循环操作元素

怼烎@ 2023-07-23 09:55 11阅读 0赞

##### 使用for of 循环操作元素： #####

*  点击哪个li 哪个li 变成红色

<ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        
        <script>
            // 点击哪个li 哪个li 变成红色
            let lis = document.querySelectorAll('li');
            for (let val of lis) { 
                val.addEventListener('click', function() { 
                    val.innerText = +val.innerText + 1
                    val.style.backgroundColor = 'red'
                })
            };
        </script>

*  点击哪个li 哪个li 变成 蓝色

<ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <script>
            // 点击哪个li 哪个li 变成 蓝色
            let lis = document.querySelectorAll('li');
            for (let vals of lis) { 
                vals.addEventListener('click', function() { 
                    vals.style.backgroundColor = 'blue'
                })
            };
        </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关使用for循环时，Python列表操作问题

在Python中，如果你正在使用for循环遍历一个列表，并且在循环内部试图修改列表的某个元素，你会遇到一些问题。 1. **不可变性**：Python中的列表是不可变的。这意

冷不防/ 2025年01月16日 17:21/ 0 赞/ 15 阅读

相关使用for of 循环操作元素

使用for of 循环操作元素：点击哪个li 哪个li 变成红色 <ul> <li>1</li> <li

怼烎@/ 2023年07月23日 09:55/ 0 赞/ 12 阅读

相关 forEach，for in，for of循环的用法

一、一般的遍历数组的方法: var array = [1,2,3,4,5,6,7]; for (var i = 0; i < array.leng

痛定思痛。/ 2023年07月22日 04:59/ 0 赞/ 56 阅读

相关 for of循环

`for...of`语句在[可迭代对象][Link 1]（包括 [`Array`][Array]，[`Map`][Map]，[`Set`][Set]，[`String`][St

àì夳堔傛蜴生んèń/ 2023年02月24日 11:25/ 0 赞/ 34 阅读

相关 for of 循环获取index值

for of 循环的时候非常方便，基础形态是这样的，直接打印 s ，就可以取到里面的值了，但是！！这种情况下是取不到 index for (let s of s

短命女/ 2022年12月19日 09:28/ 0 赞/ 293 阅读

相关 js使用for循环给每个数组添加元素

var arr = []; for (var i = 0; i < arr.length; i++) {

朴灿烈づ我的快乐病毒、/ 2022年10月21日 03:50/ 0 赞/ 257 阅读

相关简单的复习下 for...of 循环的使用方法

![dc81766cd9100ddd2ca5f0cd9b05d14d.png][] 来源 | https://kai666666.com/2021/06/24/for-of循

分手后的思念是犯贱/ 2022年10月12日 01:48/ 0 赞/ 58 阅读

相关 Iterator和for...of循环→for...of循环

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

阳光穿透心脏的1/2处/ 2022年10月02日 12:54/ 0 赞/ 299 阅读

相关 for循环，foreach, map，reduce用法对比+for in，for of

for不做赘述，相当简单； foreach方法： forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。注意: forEach() 对于空数组是不会执

曾经终败给现在/ 2021年11月22日 06:54/ 0 赞/ 386 阅读

相关 for...in 和 for...of循环的区别

for..in 的遍历实际上是对象的属性名称，一个Array数组也是一个对象，数组的每个元素的索引被视为属性名称，所以可以看到使用for...in 循环Array数组，拿到的其

比眉伴天荒/ 2021年10月01日 02:02/ 0 赞/ 385 阅读