排他思想

時間 2019-11-26

標籤排他思想简体版

原文原文鏈接

排他思想：
　　　點擊其中一個時其餘的變，就本身不變 如圖：

html和css代碼javascript

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <img src="./images/yellow.png" alt="">
 9 <img src="./images/yellow.png" alt="">
10 <img src="./images/yellow.png" alt="">
11 <img src="./images/yellow.png" alt="">
12 <img src="./images/yellow.png" alt="">
13 </body>
14 </html>

效果圖css

js代碼html

// 排他思想：
    //      第一種
    //          先把全部的都改變，在單獨改變本身自己
    //      第二種
    //          遍歷時判斷是否是點擊的那個，不是就變同樣的，是就不變
    //          獲取img對象節點
    let imgs = document.querySelectorAll('img');
	//  第一種：
    for (let i = 0 ;i<imgs.length;i++){
    	imgs[i].onclick = function () {
            for (let i = 0;i<imgs.length;i++){
            	imgs[i].src = './images/green.png';
            }
            this. src = './images/yellow.png';
		}
    }　　　　//　　第二種：
	for (let i = 0 ;i<imgs.length;i++){
		imgs[i].onclick = function () {
			for (let j = 0;j<imgs.length;j++){
				if (imgs[j] == this){
					this. src = './images/yellow.png';

				} else {
					imgs[j].src = './images/green.png';

				}
			}
		}
	}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。