使用javascript隐藏和显示一个div

Question

我有一个问题，我正在制作一个通过单击另一个 div 来显示和隐藏 div 的 javascript，但是因为 div 没有值或名称，所以我找不到执行此操作的方法。 我正在使用隐藏的输入类型，因为它可以有一个值，但它仍然不能正常工作。 我希望有人可以帮助我找到解决方案谢谢！

 function hideshow(pairsblock){ var value = document.getElementById(pairheader).value; if(value == 1){ document.getElementById(pairsblock).style.display = 'block'; document.getElementById(pairheader).value = 2; }else if(value == 2){ document.getElementById(pairsblock).style.display = 'none'; document.getElementById(pairheader).value = 1; } }

 .box { border:2px solid #0f111d82; margin-left:10px;important: margin-right;10px:important; padding-left:5px; padding-top:15px; padding-bottom:15px; padding-right:5px; background-color: #0f111d82; }

 <div id="pairheader2" onclick="hideshow('pairsblock')" class="box"> <input type="hidden" id="pairheader" value="1"> <h6>header</h6> </div> <div id="pairsblock" class="pairs-block"> <p>test</p>

Answer 1

您的代码抛出"Uncaught TypeError: Cannot read property 'value' of null" ，因为document.getElementById(pairheader) pairheader变量。

输入字段的id不是变量而是字符串，您忘记将其包装在""中。 所以在你的代码中pairheader应该改为"pairheader" 。

 function hideshow(pairsblock){ var value = document.getElementById("pairheader").value; if(value == 1){ document.getElementById(pairsblock).style.display = 'block'; document.getElementById("pairheader").value = 2; }else if(value == 2){ document.getElementById(pairsblock).style.display = 'none'; document.getElementById("pairheader").value = 1; } }

 .box { border:2px solid #0f111d82; margin-left:10px;important: margin-right;10px:important; padding-left:5px; padding-top:15px; padding-bottom:15px; padding-right:5px; background-color: #0f111d82; }

 <div id="pairheader2" onclick="hideshow('pairsblock')" class="box"> <input type="hidden" id="pairheader" value="1"> <h6>header</h6> </div> <div id="pairsblock" class="pairs-block"> <p>test</p>

Answer 2

您显然正在使用pairheader ，因此 javascript 需要一个变量。 该变量未定义，因此出错。 document.getElementById()接受一个字符串作为参数

 function hideshow(pairsblock){ var value = document.getElementById('pairheader').value; if(value == 1){ document.getElementById('pairsblock').style.display = 'block'; document.getElementById('pairheader').value = 2; }else if(value == 2){ document.getElementById('pairsblock').style.display = 'none'; document.getElementById('pairheader').value = 1; } }

 .box { border:2px solid #0f111d82; margin-left:10px;important: margin-right;10px:important; padding-left:5px; padding-top:15px; padding-bottom:15px; padding-right:5px; background-color: #0f111d82; }

 <div id="pairheader2" onclick="hideshow('pairsblock')" class="box"> <input type="hidden" id="pairheader" value="1"> <h6>header</h6> </div> <div id="pairsblock" class="pairs-block"> <p>test</p>

Answer 3

您的代码有问题。

您正在使用pairsblock作为参数。 没关系。

但是pairheader呢？ 您正在简单地使用它。

首先，您需要了解如何在函数中使用参数。 然后是 document.getElementById('someId') 。

 function hideshow(pairsblock){ var value = document.getElementById('pairheader').value; if(value == 1){ document.getElementById(pairsblock).style.display = 'block'; document.getElementById('pairheader').value = 2; }else if(value == 2){ document.getElementById(pairsblock).style.display = 'none'; document.getElementById('pairheader').value = 1; } }

 .box { border:2px solid #0f111d82; margin-left:10px;important: margin-right;10px:important; padding-left:5px; padding-top:15px; padding-bottom:15px; padding-right:5px; background-color: #0f111d82; }

 <div id="pairheader2" onclick="hideshow('pairsblock')" class="box"> <input type="hidden" id="pairheader" value="1"> <h6>header</h6> </div> <div id="pairsblock" class="pairs-block"> <p>test</p>

Answer 4

如果您的应用程序中有 Jquery 并且您可以使用它，则可以使用它并使用它的切换方法来使用其 id 简单地隐藏和显示 pairsblock div。

 function hideshow(pairsblock){ $('#pairsblock').toggle() }

 .box { border:2px solid #0f111d82; margin-left:10px;important: margin-right;10px:important; padding-left:5px; padding-top:15px; padding-bottom:15px; padding-right:5px; background-color: #0f111d82; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="pairheader2" onclick="hideshow('pairsblock')" class="box"> <input type="hidden" id="pairheader" value="1"> <h6>header</h6> </div> <div id="pairsblock" class="pairs-block"> <p>test</p>