使用javascript隐藏并显示div

Question

我有一个问题，我正在制作一个javascript，通过单击另一个div来显示和隐藏div，但因为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

你明白地使用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 2

您的代码正在抛出"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 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>