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

您的代码正在抛出"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()采用字符串作为它的参数

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您的代码出现问题。

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

但是pairheader呢？你正在使用它。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

如果你的应用程序中有Jquery，并且你可以使用它，你可以使用它并使用它的toggle方法来简单地隐藏并使用它的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>

使用javascript隐藏并显示div

4 个答案: