一个奇怪的小程序

最新推荐文章于 2024-03-08 12:31:45 发布

麦草CMS

最新推荐文章于 2024-03-08 12:31:45 发布

阅读量671

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/jijz243292892/article/details/87867738

web前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript封装的元素显示隐藏功能，通过选择器和正则表达式实现动态控制页面元素的显示状态，适用于不同场景的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!DOCTYPE html>
<html>
<head> 
<title>无标题文档</title>
<meta charset=utf-8>
<script language="javascript">
function $(obj){return document.getElementById(obj);} 
function doit(){ 
	hiddenOther("sel", "div", "div");
} 
function doit1(){ 
	hiddenOther("sel1", "div1", "div");
} 
function doit2(){ 
	hiddenOther("sel2", "div2", "span");
} 

function hiddenOther(sel, id, selector){
	var sel_val=$(sel).value; 
	var elems = Object.values($(id).querySelectorAll(selector)), reg = new RegExp("[\\D]*([\\d]*)\\b", "i");
	for(var i = 0; i < elems.length; i++){
		elems[i].style.display='none';
		if(reg.exec(elems[i].id)[1] == sel_val){
			elems[i].style.display='inline';
		}
	}
}

</script>
</head> 
  
<body> 
<div id="div">
<select name="sel" id="sel" onchange="javascript:doit();"> 
<option value="">不要输入框</option> 
<option value="0">输入框0</option> 
<option value="1">输入框1</option> 
<option value="2">输入框2</option> 
<option value="3">输入框3</option> 
</select> 
  
 
<div name="a" id="a" style="display:none;" >000</div>
<div name="a0" id="a0" style="display:none;" >0</div>
<div name="a1" id="a1" style="display:none;" >11</div>
<div name="a2" id="a2" style="display:none;" > 22</div>
<div name="a3" id="a3" style="display:inline;" > 33</div>
</div>

<div id="div1">
<select name="sel" id="sel1" onchange="javascript:doit1();"> 
<option value="">不要输入框</option> 
<option value="0">输入框0</option> 
<option value="1">输入框1</option> 
<option value="2">输入框2</option> 
<option value="4">输入框4</option>
</select> 
  
 
<div name="a" id="a" style="display:none;" >000</div>
<div name="a0" id="a0" style="display:none;" >0</div>
<div name="a1" id="a1" style="display:none;" >11</div>
<div name="a2" id="a2" style="display:none;" > 22</div>
<div name="a3" id="a3" style="display:inline;" > 33</div>
</div>

<div id="div2">
<select name="sel" id="sel2" onchange="javascript:doit2();"> 
<option value="">不要输入框</option> 
<option value="0">输入框0</option> 
<option value="1">输入框1</option> 
<option value="2">输入框2</option> 
<option value="4">输入框4</option>
</select> 
  
 
<span name="a" id="a" style="display:none;" >000</span>
<span name="a0" id="a0" style="display:none;" >0</span>
<span name="a2" id="a2" style="display:none;" > 22</span>
<span name="a1" id="a1" style="display:none;" >11</span>
<span name="a3" id="a4" style="display:inline;" > 44</span>
</div>

<br /> 
<br /> 
</body> 
</html>

论坛有人提出这样的需求，我就简单的封装了一下。

本文由麦草CMS出品，必属精品。(^-^)

web弹出层插件MyPopup，我写的一个javascript插件。