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

How to write this Javascript code to show/hide for each personal elements?

本文关键字：隐藏 元素 显示 何编写 Javascript 代码      更新时间：2023-09-26

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

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";}

您可以使用这样的函数。。。

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

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

function hidedetailbox(id){
....


假设您在页面中列出了10条评论，
当你从服务器上显示它时，在你的服务器脚本中保持一个类似于
的计数

<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（"comment"+i）；
建议：您可以使用jquery为您执行此操作
.thoggle（）.show（）.hide（）可能是一个不错的选择。。祝你好运：）

因为您提到了jquery。您可以使用切换

$('.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>

切换示例：

<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>
相关文章：