隐藏并显示错误

Question

我无法显示/隐藏div。它给了我错误cannot read property style from null。

任何帮助将不胜感激。

＆＃13;

＆＃13;

function HideAllShowOne(d) {
  // Between the quotation marks, list the id values of each div.

  var IDvaluesOfEachDiv = "w11 W12 W21 w31";

  //-------------------------------------------------------------
  IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/[,\s"']/g, " ");
  IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/^\s*/, "");
  IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/\s*$/, "");
  IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/  +/g, " ");
  var IDlist = IDvaluesOfEachDiv.split(" ");
  for (var i = 0; i < IDlist.length; i++) {
    HideContent(IDlist[i]);
  }
  ShowContent(d);
}


function HideContent(d) {
  document.getElementById(d).style.display = "none";
}

function ShowContent(d) {
  document.getElementById(d).style.display = "block";
}

function ReverseDisplay(d) {
  if (document.getElementById(d).style.display == "none") {
    document.getElementById(d).style.display = "block";
  } else {
    document.getElementById(d).style.display = "none";
  }
}

＆＃13;

<div id='menu' class="col-sm-4">
  <ul>
    <li>
      <a class='text-center'>
        <img src='student/student.jpg' class='img-responsive img-circle ' width='100px' height='100px' style=' float:none; ' />
      </a>
    </li>
    <li><a href='#'><b>harsha lenka</b></a>
    </li>
    <li><a href='#home'>Home</a>
    </li>
    <li class='active has-sub'><a href='#'>Week 1</a>
      <ul>
        <li><a href=javascript:HideAllShowOne( 'w11')>Back propagation Algorithm</a>
        </li>
        <li><a href=javascript:HideAllShowOne( 'w12')>Introduction</a>
        </li>
      </ul>
    </li>
    <li class='has-sub'><a href='#'>Week 2</a>
      <ul>
        <li><a href=href=javascript:HideAllShowOne( 'w21')>Introduction</a>
        </li>
      </ul>
    </li>
    <li class='has-sub'><a href='#'>Week 3</a>
      <ul>
        <li><a href=href=javascript:HideAllShowOne( 'w31')>Introduction</a>
        </li>
      </ul>
    </li>
    <li class=' has-sub'><a href='#'>Assignments</a>
      <ul>
        <li class='has-sub'><a href='#'>Mid Term 1</a>
          <ul>
            <li><a href='#'>Assignment 1</a>
            </li>
            <li><a href='#'>Assignment 2</a>
            </li>
          </ul>
        </li>
        <li class='has-sub'><a href='#'>Mid Term 2</a>
          <ul>
            <li><a href='#'>Assignment 1</a>
            </li>
            <li><a href='#'>Assignment 2</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href='#'>About</a>
    </li>

  </ul>
</div>

<div id="ved_dat" class="col-sm-8">
  <div id='#w11' style='display:none;'>
    <video width='500' height='500' controls>
      <source src='courses/Artificial Intelligence/week1/Back propagation Algorithm.mp4' type='video/mp4'>Your browser does not support the video tag.</video>
  </div>
  <div id='#w12' style='display:none;'>
    <video width='500' height='500' controls>
      <source src='courses/Artificial Intelligence/week1/Introduction.mp4' type='video/mp4'>Your browser does not support the video tag.</video>
  </div>
  <div id='#w21' style='display:none;'>
    <video width='500' height='500' controls>
      <source src='courses/Artificial Intelligence/week2/Introduction.mp4' type='video/mp4'>Your browser does not support the video tag.</video>
  </div>
  <div id='#w31' style='display:none;'>
    <video width='500' height='500' controls>
      <source src='courses/Artificial Intelligence/week3/Introduction.mp4' type='video/mp4'>Your browser does not support the video tag.</video>
  </div>
</div>


<div>
</div>

</body>
<script type='text/javascript'>
  <!-- 
  
    //-->
</script>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你的代码中有很多愚蠢的错误

1. 在所有函数调用
的参数之前删除多余的空格

例如：<a href=javascript:HideAllShowOne( 'w11')>Back propagation Algorithm</a>

更正后的代码：

<a href=javascript:HideAllShowOne('w11')>Back propagation Algorithm</a>

1. 您所有的div都有Lower-case w。

w中的var IDvaluesOfEachDiv = "w11 W12 W21 w31"中有两个Upper-case，W12和W21

注意：ID为case-sensitive

1. 删除href=和Week 2子Week 3

上的双倍li

2. 您不应在# s

中的ID之前提供div

编辑：在

下面提供了一个工作代码段
＆＃13;
＆＃13;
function HideAllShowOne(d) {
  // Between the quotation marks, list the id values of each div.

  var IDvaluesOfEachDiv = "w11 w12 w21 w31";

  //-------------------------------------------------------------
  IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/[,\s"']/g, " ");
  IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/^\s*/, "");
  IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/\s*$/, "");
  IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/  +/g, " ");
  var IDlist = IDvaluesOfEachDiv.split(" ");
  for (var i = 0; i < IDlist.length; i++) {
    HideContent(IDlist[i]);
  }
  ShowContent(d);
}


function HideContent(d) {
  document.getElementById(d).style.display = "none";
}

function ShowContent(d) {
  document.getElementById(d).style.display = "block";
}

function ReverseDisplay(d) {
  if (document.getElementById(d).style.display == "none") {
    document.getElementById(d).style.display = "block";
  } else {
    document.getElementById(d).style.display = "none";
  }
}
＆＃13;
<div id='menu' class="col-sm-4">
  <ul>
    <li>
      <a class='text-center'>
        <img src='student/student.jpg' class='img-responsive img-circle ' width='100px' height='100px' style=' float:none; ' />
      </a>
    </li>
    <li><a href='#'><b>harsha lenka</b></a>
    </li>
    <li><a href='#home'>Home</a>
    </li>
    <li class='active has-sub'><a href='#'>Week 1</a>
      <ul>
        <li><a href="javascript:HideAllShowOne('w11')">Back propagation Algorithm</a>
        </li>
        <li><a href="javascript:HideAllShowOne('w12')">Introduction</a>
        </li>
      </ul>
    </li>
    <li class='has-sub'><a href='#'>Week 2</a>
      <ul>
        <li><a href="javascript:HideAllShowOne('w21')">Introduction</a>
        </li>
      </ul>
    </li>
    <li class='has-sub'><a href='#'>Week 3</a>
      <ul>
        <li><a href="javascript:HideAllShowOne('w31')">Introduction</a>
        </li>
      </ul>
    </li>
    <li class=' has-sub'><a href='#'>Assignments</a>
      <ul>
        <li class='has-sub'><a href='#'>Mid Term 1</a>
          <ul>
            <li><a href='#'>Assignment 1</a>
            </li>
            <li><a href='#'>Assignment 2</a>
            </li>
          </ul>
        </li>
        <li class='has-sub'><a href='#'>Mid Term 2</a>
          <ul>
            <li><a href='#'>Assignment 1</a>
            </li>
            <li><a href='#'>Assignment 2</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href='#'>About</a>
    </li>

  </ul>
</div>

<div id="ved_dat" class="col-sm-8">
  <div id='w11' style='display:none;'>
    <video width='500' height='500' controls>
      <source src='courses/Artificial Intelligence/week1/Back propagation Algorithm.mp4' type='video/mp4'>Your browser does not support the video tag.</video>
  </div>
  <div id='w12' style='display:none;'>
    <video width='500' height='500' controls>
      <source src='courses/Artificial Intelligence/week1/Introduction.mp4' type='video/mp4'>Your browser does not support the video tag.</video>
  </div>
  <div id='w21' style='display:none;'>
    <video width='500' height='500' controls>
      <source src='courses/Artificial Intelligence/week2/Introduction.mp4' type='video/mp4'>Your browser does not support the video tag.</video>
  </div>
  <div id='w31' style='display:none;'>
    <video width='500' height='500' controls>
      <source src='courses/Artificial Intelligence/week3/Introduction.mp4' type='video/mp4'>Your browser does not support the video tag.</video>
  </div>
</div>


<div>
</div>

</body>
<script type='text/javascript'>
  <!-- 
  
    //-->
</script>
＆＃13;
＆＃13;
＆＃13;

Answer 2

除@ Munawir的回答外，<div id='#w11' style='display:none;'>元素ID为#w11而非w11。从ID中删除#。

function HideAllShowOne(d) {
  // Between the quotation marks, list the id values of each div.

  var IDvaluesOfEachDiv = "w11 W12 W21 w31";

  //-------------------------------------------------------------
  IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/[,\s"']/g, " ");
  IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/^\s*/, "");
  IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/\s*$/, "");
  IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/  +/g, " ");
  console.log(IDvaluesOfEachDiv)
  var IDlist = IDvaluesOfEachDiv.split(" ");
  for (var i = 0; i < IDlist.length; i++) {
    HideContent(IDlist[i].toLowerCase());
  }
  ShowContent(d);
}


function HideContent(d) {
  console.log(document.getElementById(d),d)
  document.getElementById(d).style.display = "none";
}

function ShowContent(d) {
  document.getElementById(d).style.display = "block";
}

function ReverseDisplay(d) {
  if (document.getElementById(d).style.display == "none") {
    document.getElementById(d).style.display = "block";
  } else {
    document.getElementById(d).style.display = "none";
  }
}

<div id='menu' class="col-sm-4">
  <ul>
    <li>
      <a class='text-center'>
        <img src='student/student.jpg' class='img-responsive img-circle ' width='100px' height='100px' style=' float:none; ' />
      </a>
    </li>
    <li><a href='#'><b>harsha lenka</b></a>
    </li>
    <li><a href='#home'>Home</a>
    </li>
    <li class='active has-sub'><a href='#'>Week 1</a>
      <ul>
        <li><a href=javascript:HideAllShowOne('w11')>Back propagation Algorithm</a>
        </li>
        <li><a href=javascript:HideAllShowOne( 'w12')>Introduction</a>
        </li>
      </ul>
    </li>
    <li class='has-sub'><a href='#'>Week 2</a>
      <ul>
        <li><a href=href=javascript:HideAllShowOne( 'w21')>Introduction</a>
        </li>
      </ul>
    </li>
    <li class='has-sub'><a href='#'>Week 3</a>
      <ul>
        <li><a href=href=javascript:HideAllShowOne( 'w31')>Introduction</a>
        </li>
      </ul>
    </li>
    <li class=' has-sub'><a href='#'>Assignments</a>
      <ul>
        <li class='has-sub'><a href='#'>Mid Term 1</a>
          <ul>
            <li><a href='#'>Assignment 1</a>
            </li>
            <li><a href='#'>Assignment 2</a>
            </li>
          </ul>
        </li>
        <li class='has-sub'><a href='#'>Mid Term 2</a>
          <ul>
            <li><a href='#'>Assignment 1</a>
            </li>
            <li><a href='#'>Assignment 2</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href='#'>About</a>
    </li>

  </ul>
</div>

<div id="ved_dat" class="col-sm-8">
  <div id='w11' style='display:none;'>
    <video width='500' height='500' controls>
      <source src='courses/Artificial Intelligence/week1/Back propagation Algorithm.mp4' type='video/mp4'>Your browser does not support the video tag.</video>
  </div>
  <div id='w12' style='display:none;'>
    <video width='500' height='500' controls>
      <source src='courses/Artificial Intelligence/week1/Introduction.mp4' type='video/mp4'>Your browser does not support the video tag.</video>
  </div>
  <div id='w21' style='display:none;'>
    <video width='500' height='500' controls>
      <source src='courses/Artificial Intelligence/week2/Introduction.mp4' type='video/mp4'>Your browser does not support the video tag.</video>
  </div>
  <div id='w31' style='display:none;'>
    <video width='500' height='500' controls>
      <source src='courses/Artificial Intelligence/week3/Introduction.mp4' type='video/mp4'>Your browser does not support the video tag.</video>
  </div>
</div>


<div>
</div>

</body>
<script type='text/javascript'>
  <!-- 
  
    //-->
</script>

Answer 3

最后感谢你的帮助人员:)

   <script type='text/javascript'>
    var ids = $.map($('#ved_dat div'), function(n,i) {
                  return n.id
              });

        function show_hide(d){

          for (i = 0; i < ids.length; i++) { 
              if(ids[i]!=d){
                document.getElementById(ids[i]).style.display='none';
              }
          }
         document.getElementById(d).style.display='block';

        }

      </script>