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

Question

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

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

Answer 1

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

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

您向它传递数字(作为i)以及它是否应该隐藏或重置(作为hide) display属性。

Answer 2

function hidedetailbox(id){
....

Answer 3

因为你提到了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>