如何编写此 Javascript 代码来显示/隐藏每个个人元素？答案

【问题标题】：How to write this Javascript code to show/hide for each personal elements?如何编写此 Javascript 代码来显示/隐藏每个个人元素？
【发布时间】：2012-02-21 06:58:14
【问题描述】：

如何循环编写这段代码？实际上，我正在使用一些不同的链接来显示和隐藏每个相关链接的框。我想为每个链接显示/隐藏显示与该链接相关的信息的框。

function hidedetailbox1()
{document.getElementById("plc1").style.display="none";}
function showdetailbox1()
{document.getElementById("plc1").style.display="block";}

function hidedetailbox2()
{ document.getElementById("plc2").style.display="none";}
function showdetailbox2()
{document.getElementById("plc2").style.display="block"; }

function hidedetailbox3()
{document.getElementById("plc3").style.display="none";}
function showdetailbox3()
{document.getElementById("plc3").style.display="block"; }

function hidedetailbox4()
{document.getElementById("plc4").style.display="none";}
function showdetailbox4()
{document.getElementById("plc4").style.display="block";}

function hidedetailbox5()
{document.getElementById("plc5").style.display="none";}
function showdetailbox5()
{document.getElementById("plc5").style.display="block";}

function hidedetailbox6()
{document.getElementById("plc6").style.display="none";}
function showdetailbox6()
{document.getElementById("plc6").style.display="block";}

function hidedetailbox7()
{document.getElementById("plc7").style.display="none";}
function showdetailbox7()
{document.getElementById("plc7").style.display="block";}

function hidedetailbox8()
{document.getElementById("plc8").style.display="none";}
function showdetailbox8()
{document.getElementById("plc8").style.display="block";}

function hidedetailbox9()
{document.getElementById("plc9").style.display="none";}
function showdetailbox9()
{document.getElementById("plc9").style.display="block";}

function hidedetailbox10()
{document.getElementById("plc10").style.display="none";}
function showdetailbox10()
{document.getElementById("plc10").style.display="block";}

function hidedetailbox11()
{document.getElementById("plc11").style.display="none";}
function showdetailbox11()
{document.getElementById("plc11").style.display="block";}

function hidedetailbox12()
{document.getElementById("plc12").style.display="none";}
function showdetailbox12()
{document.getElementById("plc12").style.display="block";}

function hidedetailbox13()
{document.getElementById("plc13").style.display="none";}
function showdetailbox13()
{document.getElementById("plc13").style.display="block";}

【问题讨论】：

标签： javascript jquery show-hide

【解决方案1】：

你可以使用这样的函数...

var toggleDisplay = function(i, hide) {
    document.getElementById('plc' + i).style.display = hide ? 'none' : '';
}

您将数字（如i）传递给它，以及它是否应该隐藏或重置（如hide）display 属性。

【讨论】：

好的，我认为这个答案很好，但是如何将它与 html 一起使用，我正在使用

@alex 因为你的函数被称为“切换”，不需要第二个参数。

@alfasin 为什么不呢？如果您希望它类似于 jQuery，当然可以，但这不是调用函数 toggle 的要求。此外，jQuery 的 toggleClass() 确实使用第二个参数作为 switch。

@alex 为什么不呢？因为“切换”的含义是在两种状态（如开/关）之间来回切换状态。因此，如果您想使用第二个参数来实现它 - 我会将函数的名称更改为“changeState()”或类似的名称；)

【解决方案2】：

function hidedetailbox(id){
....

【讨论】：

如果你再努力一点，写下第二行："document.getElementById(id).style.display="none";}" 你会得到另一个 +1

【解决方案3】：

假设您在页面中列出了 10 个 cmets，
当您从服务器显示它时，在您的服务器脚本中保留一个类似

的计数

<div id="1">comment1</div>
<div id="2">comment2</div>
<div id="3">comment3</div>
etc...

如果是图片等其他内容，可以使用

<...name="1"....>

现在你可以像这样循环处理它们，

for(i++){
 getElementById(i); //handle it the way you want here.
}

如果你有一个特定的元素名称，你可以与“i”连接喜欢 getElementById("评论"+i);
建议：您可以使用jquery为您执行此操作
.toggle().show().hide() 可以是一个好东西看看.. 祝你好运:)

【讨论】：

【解决方案4】：

既然你提到了 jquery。你可以使用toggle

$('.boxlink').click(function(e) {
    $($(e.target).attr('href')).toggle();
    return false;
});

您在 HTML 中的链接将如下所示：

<a href="#plc1" class="boxlink"> Toggle PLC 1</a>
<a href="#plc2" class="boxlink"> Toggle PLC 2</a>

【讨论】：

那个选择器是怎么回事？应该使用this。

【解决方案5】：

切换示例：

<html>
<head>
<script type="text/javascript">
var toggleDisplay = function(id) {
    if (document.getElementById(id).style.display == 'none'){
        document.getElementById(id).style.display = '';
    }
    else {
        document.getElementById(id).style.display = 'none';
    }
}
</script>
</head>
<body>
<table>
<tr><td onmouseover="toggleDisplay(1);">Test toggle</td><td id=1 name=1 >Toggle me!</td></tr>
</table>
</body>
</html>

【讨论】：