切换段落的可见性
Toggle Visibility of Paragraph
我不知道为什么我会遇到问题，只是这是我第一周看到html和javascript，哈哈。但是。。。我的方向是：
添加句子："请按此查看有关我的更多信息。"，其中"this"是按钮上的文本（位于句子中间）。实现必要的JavaScript代码，以便在单击按钮时，会出现一段文字，其中提供有关您的一些背景信息（您出生在哪里或其他什么地方）。每次点击按钮时，它都应该切换该段落的显示（使其在第一次点击后可见，在第二次点击后隐藏，在第三次点击后显示，等等）。此外，当文本可见时，带有按钮的行应更改为以下内容："请按此按钮隐藏有关我的更多信息。"单击按钮时，单词"see"answers"hide"应交替出现。"
我遇到的麻烦是如何在我点击时使这些段落可见，而不是在我再次点击时使其可见。我根据别人的问题尝试了几种不同的方法，但都不起作用。它最终不会切换任何内容，并使所有内容都可见。
非常感谢。
<!DOCTYPE html>
<html>
<body style="background-color:#ADD8E6">
<h1>my Page</h1>
<img id="myImage" onclick="changeImage()" src="hrg.jpg" width="280" height="280">
<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>
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("hrgswitch")) {
image.src = "hrg.jpg";
} else {
image.src = "hrgswitch.jpg";
}
}
</script>
<script>
function myFunction(obj) {
var x = document.getElementById("me");
if(("p3").style.visibility == "visible")
("p3").style.visibility = 'hidden';
else
("p3").style.visibility = 'visible';
}
</script>
</head>
<body>
<p2> <br>
<br>
Please push this to see more information about me. <br>
</p2>
<button id = "me" onclick = "myFunction("me")">this </button>
<p3>
<br>
<br>
Please push this to see my list of courses."
<br>
<br>
<button>this </button>
<br>
more stuff about me <br>
</p3>
<br>
<br>
<br>
<br>
<table style="width:100%">
<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 and Discrete Math</td>
<td>Monday/Wednesday/Friday</td>
<td>8:35-9:25</td>
</tr>
</table>
</body>
</html>
首先有几件小事：
-
不同的功能不需要单独的脚本块
-
p2和p3不是真正的标签-如果你需要选择一个单独的段落，请使用带有id 的p标签
<p id="p3">Please push...</p>在你的javascript中，你会像这样瞄准它：
var p3 = document.getElementById('p3'); p3.style.visibility = 'visible'; // for example -
现在，在你试图瞄准的东西之前，你已经执行了一些脚本。这行不通。尝试将所有脚本分组为一个块，并将其放在标记的相关部分（即按钮、段落等）之后。
正如另一位评论者所指出的，你应该把按钮放在句子里，所以修正它。当你在做的时候，onclick处理者通常是不受欢迎的；给它一个ID并在脚本中绑定到它。这里有一些伪代码；我没有填写函数来进行实际更改，只是记下了它们的去向。
<p>Please push <button id="toggle-button">this</button>
to <span id="see-hide">see</span> more info about me.</p>
<p id="p3">This is the content that hides or shows depending on click</p>
<script>
var btn = document.getElementById('toggle-button'),
image = document.getElementById('myImage'),
seeHide = document.getElementById('see-hide'),
toggleableContent = document.getElementById('p3'),
textIsShowing = false; // to keep track of whether the button has been toggled with this
/* We can write one function to change the image, the text,
and hide/show content all at once */
function toggleEverything() {
if( textIsShowing == false ) {
// change the image
// change the seeHide span from "show" to "hide"
// show the toggleableContent paragraph
textIsShowing = true; // this way, the next click will know we've already clicked once
return; // we're done here
}
/* this is what happens if textIsShowing is true,
because the block above will be skipped */
// change the image back
// change the seeHide span from "hide" to "show"
// hide the toggleableContent paragraph
textIsShowing = false; // reset this state for the next click
return; // and we're done
}
// Now we need to bind this to the button
btn.onclick = toggleEverything();
</script>
好的，我已经更正了您的大部分HTML代码，并使您的功能正常工作：
<!DOCTYPE html>
<html>
<head>
<title>About me</title>
<style>
body {
background-color:#ADD8E6;
}
table {
width:100%;
}
#p3 {
display:none;
}
#myImage {
width:280px;
height:280px;
}
</style>
<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 myFunction(obj) {
if(obj == "me"){
if(document.getElementById("p3").style.display == "none" || document.getElementById("p3").style.display == ""){
document.getElementById("p3").style.display = "block";
document.getElementById("p2").innerHTML = "<br /><br />Please push this to hide more information about me.<br />";
} else {
document.getElementById("p3").style.display = "none";
document.getElementById("p2").innerHTML = "<br /><br />Please push this to see more information about me.<br />";
}
}
}
</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 this to see more information about me. <br />
</p>
<button id="me" onclick ="myFunction('me');">this</button>
<p id="p3">
<br />
<br />
Please push this to see my list of courses."
<br>
<br>
<button>this</button>
<br>
more stuff about me <br>
</p>
<br />
<br />
<br />
<br />
<table>
<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 and Discrete Math</td>
<td>Monday/Wednesday/Friday</td>
<td>8:35-9:25</td>
</tr>
</table>
</body>
</html>
首先，您可以使用按钮添加实际的文本行：
<p>
Please push <button onclick="toggleParagraphVisible();">this</button>
to <span id="textIsHidden">see</span> more info about me.
</p>
接下来，确保你确实有一段要隐藏和取消隐藏。
<p id="toggleParagraph" style="display:none;">Bio goes here.</p>
最后，只需添加javascript代码：
function toggleParagraphVisible(){
if(document.getElementById("textIsHidden").innerText == "see"){
//If the sentence says "see more info"
//First, change the sentence to read "hide more info"
document.getElementById("textIsHidden").innerText = "hide";
//Next, change the display on the paragraph to block,
//which makes it visible
document.getElementById("toggleParagraph").style.display = "block";
} else {
//If the sentence doesn't say "see more info", revert everything
document.getElementById("textIsHidden").innerText = "see";
document.getElementById("toggleParagraph").style.display = "none";
}
}
除非我做了一些愚蠢的事情（人们无疑会指出这一点），否则这应该奏效。祝你好运！
只做这个
<button id = "me" onclick = "myFunction('me')">this </button>
相关文章：
- D3在一个调用中绘制不同的SVG形状，没有可见性
- jQuery css可见性在load方法中不起作用
- 页面可见性API实际上支持操作系统屏幕锁定吗
- 有没有一种方法可以从隐藏的可见性(CSS，JS）中获得淡入效果
- JavaScript可见性不起作用('隐藏'起作用，'可见'不起作用）
- 从内部回调的可见性
- Openlayers 3为了可见性而绑定到Vector层的复选框没有任何作用
- 在另一个下拉列表中的选择上切换下拉列表中选项的可见性
- 如何禁用mouseout可见性＝“;隐藏的“;对小于768px的介质的影响
- 在网格视图的自动刷新过程中，设置内部网格视图文本框的可见性
- 将元素的可见性绑定到另一个元素
- 使用 Javascript 将 HTML 页面中的默认可见性从可见更改为隐藏
- 使用 jQuery 检查文本可见性 .包含代码的行为不符合预期
- 在 jQuery 手风琴样式菜单中切换子项可见性
- CSS 中定义的可见性值未显示在 Javascript 中
- jquery切换可见性
- 如何使用 asp.net 中的另一个下拉列表更改下拉列表选定的索引和可见性
- 使用javascript的图像可见性
- 如何在 js 中捕获 win8 Metro 应用的可见性更改/应用后台事件
- 切换段落的可见性
