隐藏所有没有数组的div？ [英] hide all divs without array?
问题描述
我对javascript很新，而且我很难找到一种方法来显示一串div而不会让代码变得非常混乱。
我有几个不同的页面要写，每个页面有大约15-20个div，我需要用户能够选择一系列div - 基本上就像是一系列是/否的问题，当时 ;是"或不选中，显示相应的div以及之前的内容。
我可以隐藏所有div并显示一个，没问题。但这并不是一件好事，因为用户需要能够看到所有按顺序选择的div。
我可以单独隐藏每一个并单独显示我需要的那些，但是对于每个onclick，这将会变得混乱。
我知道你可以在页面的头部设置一个数组并使用一个hideall函数，如下所示，但问题是这样的：用于查看页面的平台需要一个模板用于每个页面，而头部只能位于模板本身，而不是页面主体。所以，我可以创建一个模板并将javascript存储在head部分中，但是如果我创建一个数组，那么每个页面必须具有相同数量的div，并且它们都必须具有相同的ID。
所以，除非我遗漏了某些内容，否则head部分中的数组也不会工作，除非你有办法设置数组而不指定其中的每个div。 （我不想为每个页面创建一个新模板）。
所以问题是，如果我不能做一个简单的hideall函数在头部区域定义一个数组？
（我也尝试将数组放入体内，但观察平台由于某种原因不接受这个） />
我已经尝试了几个不同的脚本，但我最喜欢的是下面的，从这些论坛的另一篇文章中获取 -
[ HTML]< SCRIPT LANGUAGE =" JavaScript">
//在这里你放置你想要的每个元素的id。
var ids = new Array（''' A''，''B''，''C''）;
函数switchid1（id）{
hideallids1（）;
showdiv1（id）;
}
函数hideallids1（）{
//循环遍历数组并通过id隐藏每个元素
for（var i = 0; i< ids.length; i ++）{
hidediv1（ids [i]）;
}
}
函数hidediv1（id）{
//隐藏具有指定id的元素的安全函数
if（document.getElementById）{// DOM3 = IE5，NS6
document.getElementById（id）.style.display =''none'';
}
else {
if（document.layers）{// Netscape 4
document.id.display =''none'';
}
else {// IE 4
document.all.id.style.display =''none'';
}
}
}
函数showdiv1（id）{
//安全函数显示具有指定id的元素
if（document.getElementById）{// DOM3 = IE5，NS6
document.getElementById（id） .style.display =''block'';
}
else {
if（document.layers）{// Netscape 4
document.id.display =''block'';
}
else {// IE 4
的document.all .id.style.display =''block'';
}
}
}
< / SCRIPT>
< / head>
< body> [/ HTML]
Hi,
I''m very new to javascript, and I''m having trouble finding a way to display a string of divs without the code getting really messy.
I have several different pages to write, each with about 15-20 divs, and I need users to be able to select a sequence of divs - basically like a series of yes/no questions that, when "yes" or "no" is selected, displays the appropriate div as well as what''s come before it.
I can hide all divs and display one, no problem. But thats no good cause a user needs to be able see the all the divs which have been selected in sequence.
I can hide each one individually and show the ones I need individually, but this is going to get messy with long strings of actions for each onclick.
I understand you can set up an array in the head of the page and use a hideall function like the one below, but the problem here is this: the platform used to view the pages requires a template to be used for each page, and the head section can only be located in the template itself, not the page body. So, I can create a template and store the javascript in the head section, but if I make an array then each page has to have the same number of divs, and they all have to have the same ids.
So unless I''m missing something, an array in the head section won''t work either unless there''s a way you can set an array without naming each div in it. (and I don''t want to create a new template for each page).
So the question is, how do I make a simple hideall function given that I can''t define an array in the head section?
(I''ve also tried putting the array in the body, but the viewing platform doesn''t accept this for some reason)
I''ve tried a few different scripts, but the one I like best is below, taken from another post in these forums -
[HTML]<SCRIPT LANGUAGE="JavaScript">
//here you place the ids of every element you want.
var ids=new Array(''A'',''B'',''C'');
function switchid1(id){
hideallids1();
showdiv1(id);
}
function hideallids1(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv1(ids[i]);
}
}
function hidediv1(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = ''none'';
}
else {
if (document.layers) { // Netscape 4
document.id.display = ''none'';
}
else { // IE 4
document.all.id.style.display = ''none'';
}
}
}
function showdiv1(id) {
//safe function to show an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = ''block'';
}
else {
if (document.layers) { // Netscape 4
document.id.display = ''block'';
}
else { // IE 4
document.all.id.style.display = ''block'';
}
}
}
</SCRIPT>
</head>
<body>[/HTML]
推荐答案
嗨...
您可以使用：
hi ...
you may use the:
谢谢gits，这看起来就像我正在寻找的。但是我不能让它在我的代码中工作......
你可以在下面看到我之前做的按钮分别隐藏每个div，还有一个新的我尝试使用hideallids功能隐藏所有div的按钮，但它不起作用。
如果有人有任何想法，他们会非常感激！
（顺便说一下，我不认为我需要使用二级元素，因为在这个阶段我所追求的是一个有效的隐藏功能 - 我将使用hideall与一些showdiv'一起显示我在每个点需要的那些）
代码：
[HTML]< ; head>
< script language =" JavaScript">
var divs = document.getElementsByTagName（''div''）
功能开关（id）{
hideallids（）;
showdiv（id）;
}
函数hideallids（）{
//遍历数组a nd通过id隐藏每个元素
for（var i = 0; i< ids.length; i ++）{
hidediv（ids [i]）;
}
}
function hidediv（id）{
//隐藏具有指定id的元素的安全函数
if（document.getElementById）{// DOM3 = IE5，NS6
document.getElementById（id）.style.display =''没有';
}
else {
if（document.layers）{// Netscape 4
document.id.display =''none'';
}
else {// IE 4
document.all。 id.style.display =''none'';
}
}
}
function showdiv（id）{
//安全函数显示具有指定id的元素
if（document.getElementById）{// DOM3 = IE5，NS6
document.getElementById（id）.style.display =''block'';
}
else {
if（document.layers） {// Netscape 4
document.id.display =''block'';
}
else {// IE 4
document.all.id.style.display =''block'';
}
}
}
< / script>
< / head>
< body>
< a href =" javascript ：showdiv（''a1''）; hidediv（''b1''）;隐藏iv（''b2''） ; hidediv（''b3''）; hidediv（''b4''）; hidediv（''a2''）"> First Layer Yes< / a>
< a href =" javascript ：showdiv（''a2''）; hidediv（''b3''）; hided iv（''b4''）; hidediv（''b1''）; hidediv （''b2''）; hidediv（''a1''）">第一层否< / a>
< input type =" button"的onclick = QUOT;的JavaScript的 的：hidediv（ A1’ ）; hidediv（ A2’ ）" value ="全部清除< / a>
< input type =" button"的onclick = QUOT;的JavaScript的 的：hideallids（）" value ="全部隐藏< / a>
< div id =''a1''style =" display：none;">
第一层是内容是< BR>< BR>
< input type =" button"的onclick = QUOT;的JavaScript的 的：showdiv（ B1’ ）; hidediv（ B2）" value =" Second Layer Yes"< / a>
< input type =" button"的onclick = QUOT;的JavaScript的 的：showdiv（ B2’ ）; hidediv（ B1’ ）" value =" Second Layer No"< / a>
< / div>
< div id =''b1 ''style =" display：none">
第二层是内容
< / div>
< ; div id ='''b2''style =" display：none">
第二层内容否
< / div>
< div id =''a2''style =" display：none;">
第一层内容否< BR>< BR>
< input type =" button"的onclick = QUOT;的JavaScript的 的：showdiv（ B3’ ）; hidediv（ B4）" value =" Second Layer Content Yes"< / a>
< input type =" button"的onclick = QUOT;的JavaScript的 的：showdiv（ B4’ ）; hidediv（ B3’ ）" value ="第二层内容否<< / a>
< / div>
< div id ='' b3''style =" display：none">
第二层内容是
< / div>
< div id =''b4''style =" display：none">
第二层内容否
< / div>
< / body> [/ HTML]
Thanks gits, that seems like its exactly what I''m looking for. But I can''t get it to work in my code...
You can see below there''s a button which I made earlier to hide each div separately, and a new button which I tried to make hide all divs with the hideallids function, but its not working.
If anyone has any ideas they''d be much appreciated!
(incidentally, I don''t think I''ll need to use the secondary class element, because at this stage all I''m after is a hideall function that works - I''ll use the hideall in conjuction with a few showdiv''s to display the ones I need at each point)
Code:
[HTML]<head>
<script language="JavaScript">
var divs = document.getElementsByTagName(''div'')
function switchid(id){
hideallids();
showdiv(id);
}
function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv(ids[i]);
}
}
function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = ''none'';
}
else {
if (document.layers) { // Netscape 4
document.id.display = ''none'';
}
else { // IE 4
document.all.id.style.display = ''none'';
}
}
}
function showdiv(id) {
//safe function to show an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = ''block'';
}
else {
if (document.layers) { // Netscape 4
document.id.display = ''block'';
}
else { // IE 4
document.all.id.style.display = ''block'';
}
}
}
</script>
</head>
<body>
<a href="javascript:showdiv(''a1'');hidediv(''b1'');hided iv(''b2'');hidediv(''b3'');hidediv(''b4'');hidediv(''a2'') ">First Layer Yes</a>
<a href="javascript:showdiv(''a2'');hidediv(''b3'');hided iv(''b4'');hidediv(''b1'');hidediv(''b2'');hidediv(''a1'') ">First Layer No</a>
<input type="button" onclick="javascript:hidediv(''a1'');hidediv(''a2'')" value="Clear all"</a>
<input type="button" onclick="javascript:hideallids()" value="Hide all"</a>
<div id=''a1'' style="display:none;">
First Layer Yes Content Yes<BR><BR>
<input type="button" onclick="javascript:showdiv(''b1'');hidediv(''b2'')" value="Second Layer Yes"</a>
<input type="button" onclick="javascript:showdiv(''b2'');hidediv(''b1'')" value="Second Layer No"</a>
</div>
<div id=''b1'' style="display:none">
Second Layer Yes Content
</div>
<div id=''b2'' style="display:none">
Second Layer Content No
</div>
<div id=''a2'' style="display:none;">
First Layer Content No<BR><BR>
<input type="button" onclick="javascript:showdiv(''b3'');hidediv(''b4'')" value="Second Layer Content Yes"</a>
<input type="button" onclick="javascript:showdiv(''b4'');hidediv(''b3'')" value="Second Layer Content No"</a>
</div>
<div id=''b3'' style="display:none">
Second Layer Content Yes
</div>
<div id=''b4'' style="display:none">
Second Layer Content No
</div>
</body>[/HTML]
在您的 hideallids - 函数中，您引用 ID 那应该是 divs 我认为：）
in your hideallids-function you refer to ids that should be divs i think :)
这篇关于隐藏所有没有数组的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
