Как написать этот код JavaScript, чтобы показать / скрыть для каждого личного элемента? - PullRequest
Новая
       3

Как написать этот код JavaScript, чтобы показать / скрыть для каждого личного элемента?

4 голосов
/ 21 февраля 2012

Как я могу написать этот код в цикле?На самом деле я использую несколько разных ссылок, чтобы показать и скрыть поле для каждой связанной ссылки.Я хочу показать / скрыть поле для каждой ссылки, отображающей информацию, относящуюся к этой ссылке. 

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 голосов
/ 21 февраля 2012

Вы можете использовать функцию, подобную этой ... 

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

Вы передаете ему число (как i) и должны ли оно скрывать или сбрасывать (как hide) свойство display.

1 голос
/ 21 февраля 2012


Предположим, у вас есть 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 ( "комментарий" + я);
Предложение: вы можете использовать jquery, чтобы сделать это для вас
.toggle () .show () .hide () может быть хорошей вещью для взгляда .. Удачи:)

1 голос
/ 21 февраля 2012

Так как вы упомянули 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>
1 голос
/ 21 февраля 2012 
function hidedetailbox(id){
....
0 голосов
/ 22 февраля 2012

пример переключения: 

<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>
...