JS实现在Repeater控件中创建可隐藏区域的代码

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JS实现在Repeater控件中创建可隐藏区域的代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4996字，纯文字阅读大概需要8分钟。

内容图文

<script language="JavaScript"> 
function showHideContent(id, show) 
{ 
　var elem = document.getElementById(id); 
　if (elem) 
　{ 
　　if (show) 
　　{ 
　　　elem.style.display = 'block'; 
　　　elem.style.visibility = 'visible'; 
　　} 
　　else 
　　{ 
　　　elem.style.display = 'none'; 
　　　elem.style.visibility = 'hidden'; 
　　} 
　} 
} 
</script> 
<div id="someRegion"> 
　This text will be displayed or hidden when clicking the appropriate button below... 
</div> 
<input type="button" value = "Hide Content" 
　onclick="showHideContent('someRegion', false);"> 
<input type="button" value = "Show Content" onclick="showHideContent('someRegion', true);"> 
 
　　在上面的javscript代码中，充分利用了HTML元素的display和visiblity属性，而且要注意，这两个属性应该同时使用。首先在button按钮的onclick事件中，调用了自定义的javscript写的函数showhidecontent,该函数有两个参数，id和show,id表示要显示或者隐藏的区域的名称，比如该例子中，要显示或隐藏的区域是<div>标记内的文本，show为布尔值，决定是否隐藏或显示该区域。而在showhidecontent函数中，则根据show的值,控制display和visiblity属性。 

　　明白了上面例子的道理后，下面就可以在repeater控件中应用了。比如，我们要创建一个FAQ问答录，其中有很多用户要询问的问题，则使用上面的方法，可以先将用户的问题使用repeater控件罗列出来,之后当用户点击该问题时,则会显示出隐藏的回答，十分方便。Repeater的代码片段如下: 
 代码如下:

<asp:Repeater id="rptFAQs" runat="server"> 
<ItemTemplate> 
　<h2><%# DataBinder.Eval(Container.DataItem, "Description") %></h2><br /> 
　<b>Submitted By:</b> <%# DataBinder.Eval(Container.DataItem, "SubmittedByName") %><br /> 
　<b>Views:</b> <%# DataBinder.Eval(Container.DataItem, "ViewCount", "{0:d}") %><br /> 
　<b>FAQ:</b><br /> 
　<%# DataBinder.Eval(Container.DataItem, "Answer") %> 
</ItemTemplate> 
</asp:Repeater> 
 
　　我们可以看到，上面的代码只是描述了静态的一个repeater。接下来，我们要在repeater的模版列上进行一下修改，以满足要求。 
首先，我们为每一条记录都创建两个<div>标记，一个显示FAQ的问题，另一个则显示问题的答案,而且要为每一个<div>标记赋值一个唯一的id,每条记录中，显示问题的<div>标记的id记作h index(index为Repeater控件中每一项的id号，利用itemindex),而显示答案的<div>标记的id记作dindex。代码如下:

 代码如下:

<script language="JavaScript"> 
function ToggleDisplay(id) 
{ 
　var elem = document.getElementById('d' + id); 
　if (elem) 
　{ 
　　if (elem.style.display != 'block') 
　　{ 
　　　elem.style.display = 'block'; 
　　　elem.style.visibility = 'visible'; 
　　} 
　　else 
　　{ 
　　　elem.style.display = 'none'; 
　　　elem.style.visibility = 'hidden'; 
　　} 
　} 
} 
</script> 
<style> 
.header { font-size: larger; font-weight: bold; cursor: hand; cursor:pointer; 
background-color:#cccccc; font-family: Verdana; } 
.details { display:none; visibility:hidden; background-color:#eeeeee; 
font-family: Verdana; } 
</style> 

　<asp:Repeater id="rptFAQs" runat="server"> 
　<ItemTemplate> 
　　<div id='h<%# DataBinder.Eval(Container, "ItemIndex") %>' class="header" 
onclick='ToggleDisplay(<%# DataBinder.Eval(Container, "ItemIndex") %>);'> 
　　　<%# DataBinder.Eval(Container.DataItem, "Description") %> 
　　</div> 

　　<div id='d<%# DataBinder.Eval(Container, "ItemIndex") %>' class="details"> 
　　　<b>Submitted By:</b> <%# DataBinder.Eval(Container.DataItem, "SubmittedByName") %><br /> 
　　　<b>Views:</b> <%# DataBinder.Eval(Container.DataItem, "ViewCount", "{0:d}") %><br /> 
　　　<b>FAQ:</b><br /> 
　　　<%# DataBinder.Eval(Container.DataItem, "Answer") %> 
　　</div> 
　</ItemTemplate> 
</asp:Repeater> 
 
　　我们重点来看下后半部分的代码，其中 
<div id='h<%# DataBinder.Eval(Container, "ItemIndex") %>' class="header" 
onclick='ToggleDisplay(<%# DataBinder.Eval(Container, "ItemIndex") %>);'>会将每条记录的问题部分，包裹在类似<div id=h1>,<div id=h2>之类的标记内，当点击时，则调用toggledisplay函数，在该函数内，看传入的参数是否是需要显示的区域（注意，通过 
var elem = document.getElementById('d' + id);）一句进行判断，是的话则设置display和visiblity属性显示，否则不显示。
            
            


           
                
                                                

内容总结

以上是互联网集市为您收集整理的JS实现在Repeater控件中创建可隐藏区域的代码全部内容，希望文章能够帮你解决JS实现在Repeater控件中创建可隐藏区域的代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端