logo标签列表

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

javascriptjqueryshow-hide
4

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

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";}
5个回答
5
您可以使用类似这样的函数...
var toggleDisplay = function(i, hide) {
    document.getElementById('plc' + i).style.display = hide ? 'none' : '';
}

您需要传递数字（作为 i）以及它是否应该隐藏或重置（作为 hide）display 属性。
好的，我认为这个答案很好，但是如何在HTML中使用它呢？我正在使用<li onmouseover="showdetailbox10()" onmouseout="hidedetailbox10()">。 - Rashtra
1
如果你在这方面遇到了困难，那么你应该真正阅读一下优秀的JavaScript教程。 - alex
@alex，由于你的函数名为“toggle”，不需要第二个参数。 - Nir Alfasi
@alfasin 为什么不呢？如果你想让它与jQuery类似，那当然可以，但这并不是将函数称为“toggle”的要求。此外，jQuery的toggleClass()确实将第二个参数用作开关。 - alex
@alex 为什么不呢？因为“toggle”的意思是在两种状态之间来回切换（例如开/关），如果你想用第二个参数实现它，我建议把函数名改为“changeState()”或类似的名称。;) - Nir Alfasi
1
function hidedetailbox(id){
....
1
如果你再多花点心思，写出第二行代码："document.getElementById(id).style.display="none";}"，你就能再得到一个加分。 - Nir Alfasi
1

既然你提到了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。 - alex
1
假设您在页面上列出了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 来自动完成此操作。 .toggle() .show() .hide() 可以是一个不错的选择。
祝好运 :)
0

切换示例：

<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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接