输入框无内容则隐藏整个LI，不知何故隐藏后出不来

设计手 2017-09-23 01:46:51 




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>隐藏显示</title>

</head>

<script type="text/javascript">

function  CaiLiaoShow(DoGetID)

{	

	if (document.getElementById('One1') && document.getElementById('One2') && document.getElementById('One3'))

	{

		var TheHide4 = 0;

		var TheHide5 = 0;

		var TheHide6 = 0;



	    var CaiLiaoInput4 = document.getElementById('One1').getElementsByTagName('input');

	    for(var ForI4=0; ForI4<CaiLiaoInput4.length; ForI4++)

	    {

		   if (parseInt(CaiLiaoInput4[ForI4].value.replace(/\s/g, "").length) !=0)

		   {

			   TheHide4 = 1;			  

			   ForI4=CaiLiaoInput4.length;

		   }

		}

	   

		if (TheHide4 == 1)

		{

		   document.getElementById('One1').style.display = "block";		   	   	

		}

		else

		{

		   if (document.getElementById('One1').style.display.toLocaleLowerCase()=="block")

		   {

		      document.getElementById('One1').style.display = "none";

		   }

		   else

		   {

		      document.getElementById('One1').style.display = "block";	

		   }

		}

		//第3行开始

		var CaiLiaoInput5 = document.getElementById('One2').getElementsByTagName('input');

	    for(var ForI5=0; ForI5<CaiLiaoInput5.length; ForI5++)

	    {

		   if (parseInt(CaiLiaoInput5[ForI5].value.replace(/\s/g, "").length) !=0)

		   {

			   TheHide5 = 1;			  

			   ForI5=CaiLiaoInput5.length;

		   }

		}

	   

		if (TheHide5 == 1)

		{

		   document.getElementById('One2').style.display = "block";		   	   	

		}

		else

		{

		   if (document.getElementById('One2').style.display.toLocaleLowerCase()=="block")

		   {

		      document.getElementById('One2').style.display = "none";

		   }

		   else

		   {

		      document.getElementById('One2').style.display = "block";	

		   }

		}

		//第4行开始

		var CaiLiaoInput6 = document.getElementById('One3').getElementsByTagName('input');

	    for(var ForI6=0; ForI6<CaiLiaoInput6.length; ForI6++)

	    {

		   if (parseInt(CaiLiaoInput6[ForI6].value.replace(/\s/g, "").length) !=0)

		   {

			   TheHide6 = 1;			  

			   ForI6=CaiLiaoInput6.length;

		   }

		}

	   

		if (TheHide6 == 1)

		{

		   document.getElementById('One3').style.display = "block";		   	   	

		}

		else

		{

		   if (document.getElementById('One3').style.display.toLocaleLowerCase()=="block")

		   {

		      document.getElementById('One3').style.display = "none";

		   }

		   else

		   {

		      document.getElementById('One3').style.display = "block";	

		   }

		}

		

		if (TheHide4 == 1 && TheHide5 == 1 && TheHide6 == 1 )

		{

		   DoGetID.innerText = "x-产品"		   	   

		}

		else

		{

		   DoGetID.innerText = "＋产品"

		}

	}

	return false;

}

</script>

   

<body>

<div align="center" style="margin:2px;">

     

   

   <table width="100%" border="0" cellspacing="1" cellpadding="3" class="DivTabe">

     <tr>

	 <td width="10%">产品规格</td>

	 <td width="90%">选项区域</td>

     </tr>

     <tr>

       <td>材料区域<p><a href="javascript:void(0)" onClick="CaiLiaoShow(this);">＋产品</a></p></td>

       <td>

	     <ul id="stuff">

		   <li><input name="Tell" id="Tell" size="25" maxlength="18">这里始终显示</li>

		   <li id="One1"><input name="name1" id="name1" size="25" maxlength="18">-<input name="Tell1" id="Tell1" size="25" maxlength="18"></li>

		   <li id="One2"><input name="name2" id="name2" size="25" maxlength="18">-<input name="Tell2" id="Tell2" size="25" maxlength="18"></li>

		   <li id="One3"><input name="name3" id="name3" size="25" maxlength="18">-<input name="Tell3" id="Tell3" size="25" maxlength="18"></li>

		 </ul></td>

     </tr>

     

     <tr>

       <td>详细内容</td>

       <td> </td>

     </tr>

   </table>

   

</div>

</body>

</html>



现在正常情况下都是可以隐藏或者显示，但是当One2或者One3都有内容后，隐藏掉One1，然后去掉One2里面的表单内容再呼唤的时候One2出不来。。。
...全文
284 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
天际的海浪 2017-09-23
  • 打赏
  • 举报
 回复
引用 5 楼 zyw147 的回复:
不错 showFlag不设全局变量可以不？
不设置showFlag就没有统一的显示和隐藏状态。 就会像你原本那样。当第一行隐藏，第二行显示时。点击后变成第一行显示，第二行隐藏。再点击又变成第一行隐藏，第二行显示
设计手 2017-09-23
  • 打赏
  • 举报
 回复
不错 showFlag不设全局变量可以不？
设计手 2017-09-23
  • 打赏
  • 举报
 回复
showFlag = !showFlag;不好意思刚才没注意这句 假设One1和One2和One3都是隐藏呢？ 按兄弟这样写需要点击2次才有反应 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>隐藏显示</title>
</head>
<script type="text/javascript">
var showFlag = true;
function  CaiLiaoShow(DoGetID)
{   
    if (document.getElementById('One1') && document.getElementById('One2') && document.getElementById('One3'))
    {
        var TheHide4 = 0;
        var TheHide5 = 0;
        var TheHide6 = 0;
 
        var CaiLiaoInput4 = document.getElementById('One1').getElementsByTagName('input');
        for(var ForI4=0; ForI4<CaiLiaoInput4.length; ForI4++)
        {
           if (parseInt(CaiLiaoInput4[ForI4].value.replace(/\s/g, "").length) !=0)
           {
               TheHide4 = 1;              
               break;
           }
        }
        document.getElementById('One1').style.display = (showFlag && TheHide4!=1)? "none":"block";
 
        //第3行开始
        var CaiLiaoInput5 = document.getElementById('One2').getElementsByTagName('input');
        for(var ForI5=0; ForI5<CaiLiaoInput5.length; ForI5++)
        {
           if (parseInt(CaiLiaoInput5[ForI5].value.replace(/\s/g, "").length) !=0)
           {
               TheHide5 = 1;              
               break;
           }
        }
        document.getElementById('One2').style.display = (showFlag && TheHide5!=1)? "none":"block";
        //第4行开始
        var CaiLiaoInput6 = document.getElementById('One3').getElementsByTagName('input');
        for(var ForI6=0; ForI6<CaiLiaoInput6.length; ForI6++)
        {
           if (parseInt(CaiLiaoInput6[ForI6].value.replace(/\s/g, "").length) !=0)
           {
               TheHide6 = 1;              
               break;
           }
        }
        document.getElementById('One3').style.display = (showFlag && TheHide6!=1)? "none":"block";
        showFlag = !showFlag;
        if (TheHide4 == 1 && TheHide5 == 1 && TheHide6 == 1 )
        {
           DoGetID.innerText = "x-产品"                  
           showFlag = true;
        }
        else
        {
           DoGetID.innerText = "＋产品"
        }
    }
    return false;
}
</script>
    
<body>
<div align="center" style="margin:2px;">
      
    
   <table width="100%" border="0" cellspacing="1" cellpadding="3" class="DivTabe">
     <tr>
     <td width="10%">产品规格</td>
     <td width="90%">选项区域</td>
     </tr>
     <tr>
       <td>材料区域<p><a href="javascript:void(0)" onClick="CaiLiaoShow(this);">＋产品</a></p></td>
       <td>
         <ul id="stuff">
           <li><input name="Tell" id="Tell" size="25" maxlength="18">这里始终显示</li>
           <li id="One1" style="display:none;"><input name="name1" id="name1" size="25" maxlength="18">-<input name="Tell1" id="Tell1" size="25" maxlength="18"></li>
           <li id="One2" style="display:none;"><input name="name2" id="name2" size="25" maxlength="18">-<input name="Tell2" id="Tell2" size="25" maxlength="18"></li>
           <li id="One3" style="display:none;"><input name="name3" id="name3" size="25" maxlength="18">-<input name="Tell3" id="Tell3" size="25" maxlength="18"></li>
         </ul></td>
     </tr>
      
     <tr>
       <td>详细内容</td>
       <td> </td>
     </tr>
   </table>
    
</div>
</body>
</html>
天际的海浪 2017-09-23
  • 打赏
  • 举报
 回复
引用 3 楼 zyw147 的回复:
showFlag = !showFlag;不好意思刚才没注意这句 假设One1和One2和One3都是隐藏呢？ 按兄弟这样写需要点击2次才有反应 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>隐藏显示</title>
</head>
<script type="text/javascript">
var showFlag = true;
function  CaiLiaoShow(DoGetID)
{   
    if (document.getElementById('One1') && document.getElementById('One2') && document.getElementById('One3'))
    {
        var TheHide4 = 0;
        var TheHide5 = 0;
        var TheHide6 = 0;
 
        var CaiLiaoInput4 = document.getElementById('One1').getElementsByTagName('input');
        for(var ForI4=0; ForI4<CaiLiaoInput4.length; ForI4++)
        {
           if (parseInt(CaiLiaoInput4[ForI4].value.replace(/\s/g, "").length) !=0)
           {
               TheHide4 = 1;              
               break;
           }
        }
        document.getElementById('One1').style.display = (showFlag && TheHide4!=1)? "none":"block";
 
        //第3行开始
        var CaiLiaoInput5 = document.getElementById('One2').getElementsByTagName('input');
        for(var ForI5=0; ForI5<CaiLiaoInput5.length; ForI5++)
        {
           if (parseInt(CaiLiaoInput5[ForI5].value.replace(/\s/g, "").length) !=0)
           {
               TheHide5 = 1;              
               break;
           }
        }
        document.getElementById('One2').style.display = (showFlag && TheHide5!=1)? "none":"block";
        //第4行开始
        var CaiLiaoInput6 = document.getElementById('One3').getElementsByTagName('input');
        for(var ForI6=0; ForI6<CaiLiaoInput6.length; ForI6++)
        {
           if (parseInt(CaiLiaoInput6[ForI6].value.replace(/\s/g, "").length) !=0)
           {
               TheHide6 = 1;              
               break;
           }
        }
        document.getElementById('One3').style.display = (showFlag && TheHide6!=1)? "none":"block";
        showFlag = !showFlag;
        if (TheHide4 == 1 && TheHide5 == 1 && TheHide6 == 1 )
        {
           DoGetID.innerText = "x-产品"                  
           showFlag = true;
        }
        else
        {
           DoGetID.innerText = "＋产品"
        }
    }
    return false;
}
</script>
    
<body>
<div align="center" style="margin:2px;">
      
    
   <table width="100%" border="0" cellspacing="1" cellpadding="3" class="DivTabe">
     <tr>
     <td width="10%">产品规格</td>
     <td width="90%">选项区域</td>
     </tr>
     <tr>
       <td>材料区域<p><a href="javascript:void(0)" onClick="CaiLiaoShow(this);">＋产品</a></p></td>
       <td>
         <ul id="stuff">
           <li><input name="Tell" id="Tell" size="25" maxlength="18">这里始终显示</li>
           <li id="One1" style="display:none;"><input name="name1" id="name1" size="25" maxlength="18">-<input name="Tell1" id="Tell1" size="25" maxlength="18"></li>
           <li id="One2" style="display:none;"><input name="name2" id="name2" size="25" maxlength="18">-<input name="Tell2" id="Tell2" size="25" maxlength="18"></li>
           <li id="One3" style="display:none;"><input name="name3" id="name3" size="25" maxlength="18">-<input name="Tell3" id="Tell3" size="25" maxlength="18"></li>
         </ul></td>
     </tr>
      
     <tr>
       <td>详细内容</td>
       <td> </td>
     </tr>
   </table>
    
</div>
</body>
</html>
那 showFlag 初始就设置为 false var showFlag = false;
天际的海浪 2017-09-23
  • 打赏
  • 举报
 回复 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>隐藏显示</title>
</head>
<script type="text/javascript">
var showFlag = true;
function  CaiLiaoShow(DoGetID)
{	
	if (document.getElementById('One1') && document.getElementById('One2') && document.getElementById('One3'))
	{
		var TheHide4 = 0;
		var TheHide5 = 0;
		var TheHide6 = 0;

	    var CaiLiaoInput4 = document.getElementById('One1').getElementsByTagName('input');
	    for(var ForI4=0; ForI4<CaiLiaoInput4.length; ForI4++)
	    {
		   if (parseInt(CaiLiaoInput4[ForI4].value.replace(/\s/g, "").length) !=0)
		   {
			   TheHide4 = 1;			  
			   break;
		   }
		}
	    document.getElementById('One1').style.display = (showFlag && TheHide4!=1)? "none":"block";

		//第3行开始
		var CaiLiaoInput5 = document.getElementById('One2').getElementsByTagName('input');
	    for(var ForI5=0; ForI5<CaiLiaoInput5.length; ForI5++)
	    {
		   if (parseInt(CaiLiaoInput5[ForI5].value.replace(/\s/g, "").length) !=0)
		   {
			   TheHide5 = 1;			  
			   break;
		   }
		}
	    document.getElementById('One2').style.display = (showFlag && TheHide5!=1)? "none":"block";
		//第4行开始
		var CaiLiaoInput6 = document.getElementById('One3').getElementsByTagName('input');
	    for(var ForI6=0; ForI6<CaiLiaoInput6.length; ForI6++)
	    {
		   if (parseInt(CaiLiaoInput6[ForI6].value.replace(/\s/g, "").length) !=0)
		   {
			   TheHide6 = 1;			  
			   break;
		   }
		}
	    document.getElementById('One3').style.display = (showFlag && TheHide6!=1)? "none":"block";
		showFlag = !showFlag;
		if (TheHide4 == 1 && TheHide5 == 1 && TheHide6 == 1 )
		{
		   DoGetID.innerText = "x-产品"		   	   
		   showFlag = true;
		}
		else
		{
		   DoGetID.innerText = "＋产品"
		}
	}
	return false;
}
</script>
   
<body>
<div align="center" style="margin:2px;">
     
   
   <table width="100%" border="0" cellspacing="1" cellpadding="3" class="DivTabe">
     <tr>
	 <td width="10%">产品规格</td>
	 <td width="90%">选项区域</td>
     </tr>
     <tr>
       <td>材料区域<p><a href="javascript:void(0)" onClick="CaiLiaoShow(this);">＋产品</a></p></td>
       <td>
	     <ul id="stuff">
		   <li><input name="Tell" id="Tell" size="25" maxlength="18">这里始终显示</li>
		   <li id="One1"><input name="name1" id="name1" size="25" maxlength="18">-<input name="Tell1" id="Tell1" size="25" maxlength="18"></li>
		   <li id="One2"><input name="name2" id="name2" size="25" maxlength="18">-<input name="Tell2" id="Tell2" size="25" maxlength="18"></li>
		   <li id="One3"><input name="name3" id="name3" size="25" maxlength="18">-<input name="Tell3" id="Tell3" size="25" maxlength="18"></li>
		 </ul></td>
     </tr>
     
     <tr>
       <td>详细内容</td>
       <td> </td>
     </tr>
   </table>
   
</div>
</body>
</html>
设计手 2017-09-23
  • 打赏
  • 举报
 回复
奇怪还是一样的问题，等下我截视频上来
删除输入框的文字
简单的一个Demo 实现删除文本框的文字，删除图片能够随着文字的显示而显示
Android 带清除功能的输入框控件ClearEditText,仿IOS的输入框
Android 带清除功能的输入框控件ClearEditText,仿IOS的输入框 ，点击右侧清除图片清除输入框内容，项目详情http://blog.csdn.net/xiaanming/article/details/11066685
javascript-输入框内容提示及隐藏
有时输入框较小，希望输入内容后，出现一个有放大输入内容的提示框 实现思路 页面上先编写出提示框，然后将提示框的css属性：display设置成none，隐藏起来 获取输入框元素对象、信息提示框元素对象 为输入框元素对象绑定键盘事件- - -keyup, 事件处理程序：判断输入的内容是否为空，不为空- - -将输入框的内容赋值给信息提示框，并设置信息提示框显示：display设置成block；为空，设置提示框不显示 添加获取焦点和失去焦点事件。 blur- - -失去焦点：鼠标不选中输入框，输入框中无光标闪
Android密码输入框内容的显示或隐藏
Android密码输入框内容的显示或隐藏
HTML5表单中password输入框的文字显示与隐藏实现
HTML5表单中对于密码输入框password类型可以隐藏用户输入的内容，但有时候会用到允许用户自由显示或者隐藏输入框内容： 要实现这个功能首先想到的是用js动态改变input的type类型，觉得将type = password变成type = text隐藏的密码就会显示，但是实际上却实现不了，没有效果，所以，只能换一个思路：放两个input，一个是password，一个是text，共同监
JavaScript

87,993

社区成员

224,694

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章