排他思想

排他思想:
   点击其中一个时其余的变,就本身不变 如图:
 

 

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

				}
			}
		}
	}
相关文章
相关标签/搜索