Question

我尝试了一些不同的东西，包括一个switch语句，使用JQuery等附加，我无法使用该按钮。我想要做的是改变P2中的单词：

Please push `<button id = "me" onclick = "toggle1('me');">this </button>` to show more information about me.

为：

Please push `<button id = "me" onclick = "toggle1('me');">this </button>` to hide more information about me.

我必须对“课程”做同样的事情，但我想如果我能理解第一个，我可以得到如何做第二个看/隐我自己。我现在很困惑：/

我认为它与span标签有关，但老实说，我在HTML的第一周，并没有学到这样的事情可能是非常简单的程序。我很感激能帮到我解决这个问题的所有帮助。

<!DOCTYPE html>
<html>
<head>
   <title>About me</title>
   <style>
    body 
    {
       background-color:#ADD8E6;
    }

    #p3 
    {
       display:none;
    }
    #myImage 
    {
       width:280px;
       height:280px;
    }
    #schedule
    {
       width: 100%;
       display:none;

    }
    </style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language = "javascript" >
   function changeImage() 
   {


      var image = document.getElementById('myImage');

      if (image.src.match("hrgswitch"))
      {
         image.src = "hrg.jpg";
      }
      else 
      {
         image.src = "hrgswitch.jpg";

      }


   }

   function toggle1(obj) 
   {
      if(obj == "me") 
      {
         if(document.getElementById("p3").style.display == "none" || document.getElementById("p3").style.display == "") 
         {

            document.getElementById("p3").style.display = "block";



         }

}
         else
         {
            document.getElementById("p3").style.display = "none";
         }


      }
      else if (obj == "courses")
      {
         if(document.getElementById("schedule").style.display == "none" || document.getElementById("schedule").style.display == "")
         {
            document.getElementById("schedule").style.display = "block";
         }
         else
         {
            document.getElementById("schedule").style.display = "none";
         }

      }
    }


</script>

</head> 

<body>

<h1> My Page </h1>

<img id="myImage" onclick="changeImage();" src="hrg.jpg" />

<p title="About Me">
Stuff about me <br>

<a href="http://www.w3schools.com/" target="_blank">Here is a link to learn more about HTML!</a>
<br>
<br>
</p>



<p id = "p2">
   <br>
   <br>
   Please push <button id = "me" onclick = "toggle1('me');">this </button> to see more information about me. 
   <br>
   <br>
   Please push <button id = "courses" onclick = "toggle1('courses');">this </button> to see my list of courses."
 </p>

 <p id = "p3" >


More stuff about me... 
<br>

</p>



<br>


<table id = "schedule">
  <tr>
    <td>Course Name</td>
    <td>Date</td>       
    <td>Time</td>
  </tr>
  <tr>
    <td>Programming Paradigms</td>
    <td>Tuesday / Thursday</td>     
    <td>11:00-12:15</td>
  </tr>
  <tr>
    <td>Computer Organization</td>
    <td>Tuesday / Thursday</td>     
    <td>9:30-10:45</td>
  </tr>

<tr>
    <td>Linear Algebra</td>
    <td>Monday/Wednesday/Friday</td>        
    <td>11:50-12:40</td>
  </tr>

<tr>
    <td>Combinatorics </td>
    <td>Monday/Wednesday/Friday</td>        
    <td>8:35-9:25</td>
  </tr>

</table>


</body>
</html>

Answer 1

您的函数toggle1中存在语法错误。删除不需要的大括号。试试这个：

<script language = "javascript" >
   function toggle1(obj) 
   {
      if(obj == "me") 
      {
         if(document.getElementById("p3").style.display == "none" || document.getElementById("p3").style.display == "") 
         {

            document.getElementById("p3").style.display = "block";



         }

         else
         {
            document.getElementById("p3").style.display = "none";
         }


      }
      else if (obj == "courses")
      {
         if(document.getElementById("schedule").style.display == "none" || document.getElementById("schedule").style.display == "")
         {
            document.getElementById("schedule").style.display = "block";
         }
         else
         {
            document.getElementById("schedule").style.display = "none";
         }

      }
    }


</script>

但是，如果您使用的是jQuery，toggle是一个内置函数。这非常简单（Inline JS - 虽然推荐为单独的脚本）：删除toggle1函数并更改两个html onclick属性：

Please push <button id = "me" onclick = "$('#p3').toggle()">this </button> to see more information about me. 

Please push <button id = "courses" onclick = "$('#schedule').toggle()">this </button> to see my list of courses.

Answer 2

使用jQuery可能更容易，这些内容......

`<script`>
function showhide() {
$( "#showhide" ).text( "hide" );
}
`</script`>


<p>Please push this to <span id="showhide">show</span> more information about me. </p>
<button onclick="showhide()">Hi</button>

使用Javascript显示/隐藏更改HTML代码

2 个答案: