＜Dom操作-对应与排他思想＞

最新推荐文章于 2022-08-04 14:00:30 发布

好先生·

最新推荐文章于 2022-08-04 14:00:30 发布

阅读量280

点赞数

分类专栏： Dom操作文章标签： JavaScript DOM操作事件处理 CSS样式修改排他逻辑

本文链接：https://blog.csdn.net/weixin_45540964/article/details/111240669

版权

Dom操作专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app1">
		<p>item1</p>
		<p>item2</p>
		<p>item3</p>
		<p>item4</p>
	</div>
	<div id="app2">
		<p>item5</p>
		<p>item6</p>
		<p>item7</p>
		<p>item8</p>
	</div>
	<script type="text/javascript">
		//获取app1下的p
		var p1=document.getElementById('app1').getElementsByTagName('p');
        //获取app2下的p
        var p2=document.getElementsByTagName('div')[1].getElementsByTagName('p');
        // console.log(p1[1].innerHTML);
        // console.log(p2[2].innerHTML);
    //对应点击出现
    	for (var i=0; i<p1.length; i++) {
    		p1[i].index=i;
    		p1[i].onclick=function() {
    			p2[this.index].style.backgroundColor='pink';
    		}
    	}
    //排他，点击后只允许出现一个
    	for (var i=0; i<p1.length; i++) {
    		p1[i].index=i;
    		p1[i].onclick=function() {
    			//先将其他的都清空
    			var j=0;
    			while ( p2[j] ) {
    				p2[j].style.backgroundColor='';
    				console.log(p2[j]);
    				j++;
    			}
    			p2[this.index].style.backgroundColor='pink';
    		};
    	}
	</script>
</body>
</html>