2. 程式人生 > 其它 >JavaScript中for 迴圈的onclick事件

JavaScript中for 迴圈的onclick事件

阿新 • • 發佈：2021-01-19

技術標籤：javascript

程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type='text/css'
 
>
        .active {
            color: rgb(189, 55, 55);
        }
    </style>
</head>
<body>
    <ul>
        <li class='a'>a</li>
        <li class='b'>b</li>
        <li class='c'>c</li>
    </ul>
    <script type='text/javascript'
 
>
        var Li = document.querySelectorAll('li');
        for (var i = 0; i < Li.length; i++) {
            Li[i].onclick = function() {
                for (var i = 0; i < Li.length; i++) {
                    Li[i].className = '';
                }
                this.className = 'active'
 
;
            }
        }
    </script>
</body>
</html>

最開始看for迴圈裡面的onclick程式碼時，我百思不得其解，為什麼點選相應的li時，顏色會改變，後來才知道原來是執行for迴圈裡面的onclick程式碼時，對每個li都產生了一個監聽，只要我們一點選，那麼就會執行function函式，改變顏色
在這裡插入圖片描述

相關推薦

JavaScript中for 迴圈的onclick事件

技術標籤：javascript 程式碼如下： <!DOCTYPE html> <html lang="en"> <head>

JavaScript中for...in迴圈使用問題

問題 使用for...in去遍歷一個數組，同時將值新增到另外一個數組時，新的陣列中每次都多出來一個function型別的元素。

python中for迴圈變數作用域及用法詳解

在講這個話題前，首先我們來看一道題： 程式碼1： def foo(): return [lambda x: x**i for i in range(1,5,2)]

如何提高python 中for迴圈的效率

對於某個城市的計程車資料，一天就有33210000條記錄，如何將每輛車的資料單獨拎出來放到一個專屬的檔案中呢？

javaScript中for...in與for...of的區別

javaScript中for...in與for...of的區別 for...in ​ for...in適合用來遍歷物件，獲取想要遍歷獲取陣列的索引。

解決Jupyter Notebook中for迴圈輸出DataFrame不夠美觀

Outline 用jupyter處理資料時，需要迴圈列印多個DataFrame，但打印出來的df看起來很難看；

JavaScript中while迴圈的基礎使用教程

前言 在 JavaScript 語言中，當我們使用 while 迴圈時，只要指定條件為 true，迴圈就可以一直執行。

Python中for迴圈與while迴圈

一、迴圈的分類 在Python中迴圈分為while迴圈和for迴圈，最終實現效果相同 二、while的語法

C++中for迴圈與while迴圈的區別總結

C++中for迴圈和while迴圈的區別 這兩者之間最大的區別就是for迴圈一般應用於迴圈次數已知的情況，而while迴圈一般應用於迴圈次數未知的情況。在一般情況下，這兩者是可以相互轉化的。

python3中for迴圈踩過的坑記錄

前言 最近在用python練習寫點爬蟲，想著把雙色球的歷史記錄爬下來存入mysql中，爬取資料沒有遇到什麼問題，在處理資料存入資料庫的時候遇到問題了，現把問題整理出來方便自己日後查詢也能幫助有緣人士：

JavaScript雙重for迴圈+追加字串 列印五行五列星星

技術標籤：js學習筆記js字串htmljavascript 最近在學python和js，python是因為要考試，同時學兩個語法感覺好混亂吶！ 今天學到了js的for迴圈和雙重for迴圈，寫個小案例記錄一下吧！ 這是我想要實現的效果：在控制

oracle中for迴圈的使用

FOR迴圈（相當於i++） CREATE OR REPLACE FUNCTION A_Test1(I_VAL VARCHAR2) RETURN VARCHAR2 is V_RESULTVARCHAR2(500);

Shell中for迴圈的幾個常用寫法

版權宣告：本文為CSDN博主「BabyFish13」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。原文連結：https://blog.csdn.net/babyfish13/article/details/52981110

javascript中addEventListener和onclick的區別

先來看addEvenListener事件。 addEventListener() 方法用於向指定元素新增事件控制代碼。 提示： 使用 removeEventListener() 方法來移除addEventListener() 方法新增的事件控制代碼。

JavaScript 中for/of,for/in 的詳細介紹

目錄在 Jawww.cppcns.comvaScript中，for 迴圈有幾種常見的寫法 第一種最常規的寫法：

JS 中for迴圈 、 for-of 、forEach 、for-in的區別

一、幾種遍歷的用法： 1、一般的遍歷陣列的方法: var array = [1,2,3,4,5,6,7]; for (var i = 0; i < array.length; i++) {

js中for迴圈原理

Javascript中的for是如何實現迴圈的？ 一、語法結構 單for迴圈 for (初始化變數； 條件表示式； 操作表示式) {

JavaScript——由for迴圈引發的關於var和作用域的思考

JavaScript——由for迴圈引發的關於var和作用域的思考 Oliver釋出於 2019-09-16 由for迴圈引發的關於var和作用域的思考

深入淺析JavaScript中的in關鍵字和for-in迴圈

1.in關鍵字 屬性名 in 物件，用來判斷某個屬性在物件中是否存在與其嚴格相等的屬性名，返回boolean值

javascript中的變數提升以及for迴圈中let和var的區別

技術標籤：前端jsjavascript 變數提升 js中函式及變數的宣告都將被提升到函式的最頂部。變數可以在使用後再宣告，也可以總是先宣告再使用。 需要注意，只有宣告的變數會提升，初始化的不會。