排他思想

时间 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';

				}
			}
		}
	}