点击英文显示中文，再次点击隐藏中文_代码点击显示隐藏中英文-CSDN博客

本文链接：https://blog.csdn.net/qq_31083947/article/details/126318198

点击英文显示中文，再次点击隐藏中文

代码
涉及方法

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p>
			<span class="en">The heaven being spread with this pallid screen and the earth with the darkest vegetation, their meeting-line at the horizon was clearly marked. </span>
			<span class="cn" style="display: none;">蒙住苍穹的是这片灰白的帐幕，遍布大地的是这片黑苍苍的石南植物，它们在天际处交接，呈现出一条清晰分明的界线。</span>
			<span class="en">In such contrast the heath wore the appearance of an instalment of night which had taken up its place before its astronomical hour was come: darkness had to a great extent arrived hereon, while day stood distinct in the sky. </span>
			<span class="cn" style="display: none;">在如此鲜明的对比下，这片荒原不等夜晚按天时自然降临，便早早蒙上了一层夜色；也就是说，在大地已经显出一片黑苍苍之际，天空依然清晰可见，昼光未逝。</span>
			<span class="en">Looking upwards, a furze-cutter would have been inclined to continue work; looking down, he would have decided to finish his faggot and go home. </span>
			<span class="cn" style="display: none;">抬头望天，一位砍荆条的人会想要继续手头的活儿，然而低头凝望，他便会决定捆好柴束，打道回府。
		</p>
	</body>
	<script>
		var enarr = document.getElementsByClassName("en");
		for(var i=0;i<enarr.length;i++){
			enarr[i].onclick = function(obj){
				return function(){
					if(obj.nextElementSibling.style.display=='none'){
						obj.nextElementSibling.style.display='';
					} else {
						obj.nextElementSibling.style.display='none';
					}
				}
			}(enarr[i]);
		}
	</script>
	
</html>

涉及方法

➤ 根据className获取dom元素

//获取所有className为“en”的dom元素
var enarr = document.getElementsByClassName("en");

➤ js绑定点击事件

//写法1
document.getElementsByClassName("en")[0].onclick = function(){
	....
};
//写法2
document.getElementsByClassName("en")[0].addEventListener('click',function(){
	....			
});

➤ js获取当前dom元素的下一个元素

document.getElementsByClassName("en")[0].nextElementSibling;

在这里插入图片描述