All geek questions in one place

How to write this javascript code to show / hide for each personal element?

How can I write this code in a loop? In fact, I use several different links to show and hide the field for each linked link. I want to show / hide the field for each link showing the information associated with this 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";}
+4
source share
5 answers

You can use such a function ...

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

You give it a number (like i ) and whether it should hide or reset (like hide ) the display property.

+5
source 
 function hidedetailbox(id){ ....
+1
source

Since you mentioned jquery. You can use toggle

 $('.boxlink').click(function(e) { $($(e.target).attr('href')).toggle(); return false; });

Your HTML links will look something like this:

 <a href="#plc1" class="boxlink"> Toggle PLC 1</a> <a href="#plc2" class="boxlink"> Toggle PLC 2</a>
+1
source


Suppose you have 10 comments listed on a page,
when you show it from the server, save the score on your server script, for example,

 <div id="1">comment1</div> <div id="2">comment2</div> <div id="3">comment3</div> etc...

if it is any other content such as an image, you can use

 <...name="1"....>

you can now 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 match with "i" as getElementById ("comment" + i);
Suggestion: you can use jquery to do it for you
. toggle () . show () .hide () might be a good idea to watch .. Good luck :)

+1
source

:

 <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>
0
source

Source: https://habr.com/ru/post/1397561/

More articles:


All Articles