如何编写这个javascript代码来显示/隐藏每个个人元素？
[英]how to write this javascript code to show/hide for each personal elements?
问题描述
How can i write this code in a loop ? 
如何在循环中编写此代码？ Actually I am using some different links to show and hide box for each related link. 实际上我正在使用一些不同的链接来显示和隐藏每个相关链接的框。 I want to show/hide box for each link showing information related to that link. 我想显示/隐藏显示/隐藏与该链接相关的信息的每个链接的框。
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 个解决方案
解决方案1
5 已采纳 2012-02-21 07:00:00
You could use a function like this... 你可以使用这样的函数......
var toggleDisplay = function(i, hide) {
document.getElementById('plc' + i).style.display = hide ? 'none' : '';
}
You pass it the number (as i ) and whether it should hide or reset (as hide ) the display property. 您传递数字（作为i ）以及是否应隐藏或重置（ hide ） display属性。
解决方案2
1 2012-02-21 07:00:09
function hidedetailbox(id){
....
解决方案3
1 2012-02-21 07:03:40
Since you mentioned jquery. 既然你提到了jquery。 You can use toggle 您可以使用切换
$('.boxlink').click(function(e) {
$($(e.target).attr('href')).toggle();
return false;
});
Your links in HTML will look something like this: 您在HTML中的链接看起来像这样：
<a href="#plc1" class="boxlink"> Toggle PLC 1</a>
<a href="#plc2" class="boxlink"> Toggle PLC 2</a>
解决方案4
1 2012-02-21 07:05:33
Suppose you have 10 comments listed in the page, 假设您在页面中列出了10条评论，
when you display it from the server, in your server script keep a count like 当您从服务器显示它时，在您的服务器脚本中保持计数
<div id="1">comment1</div>
<div id="2">comment2</div>
<div id="3">comment3</div>
etc...
if it's any other content like a image, you can use 如果它是任何其他内容，如图像，你可以使用
<...name="1"....>
now you can handle them in a loop like this, 现在你可以在这样的循环中处理它们，
for(i++){
getElementById(i); //handle it the way you want here.
}
further if you have a specific name for the element, you can concat with the "i" like getElementById("comment"+i); 此外，如果您有元素的特定名称，您可以使用“i”连接，如getElementById（“comment”+ i）;
Suggestion: you can use jquery to do this for you 建议：您可以使用jquery为您执行此操作
.toggle() .show() .hide() can be a good thing to look at.. Good luck :) .toggle（）。show（）。 haide（）可以是一件好事。祝你好运:)
解决方案5
0 2012-02-22 01:08:49
toggle example: 切换示例：
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.