使用 Prototype 使元素出现/消失
Posted
技术标签:
【中文标题】使用 Prototype 使元素出现/消失【英文标题】：Making elements appear/disappear with Prototype 【发布时间】：2020-07-29 17:40:16 【问题描述】：当点击 div 时，我需要使 div 中的 make 元素出现和消失。然后加载网页时，它应该只是说“单击此处”。单击后，在原始文本下方应出现“再次单击此处”的新文本。再次单击后，新文本出现在“再次单击”下方。再次单击后，所有文本都将被删除，并出现新的“谢谢”文本。再次单击后，该文本被删除，并出现“再见”的新文本。再次单击后，所有内容都被删除，包括文本出现的框。我是新手，真的不知道自己在做什么，我什至无法在 div 时弹出警报消息被点击，看起来应该很简单。这是我的html代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="project4.css">
<script src="prototype.js" type="text/javascript"></script>
<script src="project4.js" type="text/javascript"></script>
</head>
<body>
<div id="main" class="box">
<p id="clickHere">Click here</p>
<p id="clickHereAgain">Click here again</p>
<p id="clickOnceMore">Click once more</p>
<p id="thankYou">Thank you</p>
<p id="goodbye">Goodbye</p>
</div>
</body>
</html>
我的 javascript 代码只是尝试让警报弹出：
$(document).ready(function()
$("div").click(function()
alert("The paragraph was clicked.");
);
);
还有我的css代码：
.box
background-color: green;
color: white;
width: 300px;
height: 200px;
padding: 10px;
text-align: center;
font-size: 30px;
【问题讨论】：
你使用的是 Prototype 还是 jQuery？ 我的错，我正在使用原型。我试图在网上环顾四周并弄清楚如何做到这一点而感到困惑。这是prototype.js ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js 这看起来像 jQuery 代码。例如，$(document).ready 是 jQuery 的东西，而不是 Prototype 的 document.observe。
这是demo with Prototype。
好的，谢谢，我很困惑，一直在尝试使用 jquery 的东西哈哈。我现在开始取得一些进展，我让页面加载只有消息“单击此处”，并且可以在单击后添加消息“再次单击此处”，但我不知道如何制作为第二次、第三次、第四次等点击做一些不同的事情。每次单击时它都会不断添加“再次单击此处”。
【参考方案1】：
这是 jQuery 中您的问题的原始解决方案，您可以将逻辑转移到 prototype.js:
$(document).ready(function()
// turn off your paragraphs and buttons
$("#click2").hide();
$("#click3").hide();
$("#click4").hide();
$("#button2").hide();
$("#button3").hide();
$("#button4").hide();
// click the first button and hide and show the next
$("#button1").click(function()
$("#click1").hide();
$("#button1").hide();
$("#button2").show();
$("#click2").show();
);
// click the second button and hide and show
$("#button2").click(function()
$("#click2").hide();
$("#button2").hide();
$("#button3").show();
$("#click3").show();
);
// then the third
$("#button3").click(function()
$("#click3").hide();
$("#button3").hide();
$("#click4").show();
);
);
还有你的 HTML 代码：
<p id="click1">This is paragraph 1</p>
<button id="button1">Click me</button>
<p id="click2">This is paragraph 2</p>
<button id="button2">Click me again</button>
<p id="click3">This is paragraph 3</p>
<button id="button3">Click me one more time</button>
<p id="click4">You are done clicking</p>
不是一个优雅的解决方案，但这些是它的基础，jQuery 有一个toggle() 函数，以防万一您需要让用户能够再次显示该段落。将.show() 和.hide() 替换为.toggle()
【讨论】：
【参考方案2】：对于初学者，为 div 及其所有子项设置一个点击观察者：
$("div").observe('click', myHandler);
然后在myHandler中进行显示/隐藏操作。
一个工作示例：
// array of paragraph ids to show/hide
const ids = ["clickHere", "clickHereAgain", "clickOnceMore",
"thankYou", "goodbye"];
const idCount = ids.length;
let index = 0;
// add click listener to div
$("main").observe('click', myHandler);
// handle the click
function myHandler ()
if (index >= idCount - 1) return;
// hide the currently visible paragraph
$(ids[index]).addClassName('hide');
// show the next paragraph
index++;
$(ids[index]).removeClassName('hide');
.hide
display: none;
.box
background-color: green;
color: white;
width: 300px;
height: 100px;
padding: 10px;
text-align: center;
font-size: 30px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.min.js" type="text/javascript"></script>
<div id="main" class="box">
<p id="clickHere">Click here</p>
<p id="clickHereAgain" class="hide">Click here again</p>
<p id="clickOnceMore" class="hide">Click once more</p>
<p id="thankYou" class="hide">Thank you</p>
<p id="goodbye" class="hide">Goodbye</p>
</div>【讨论】：
我会指出，在本例中，顶部代码块$('div') 指向带有id="div" 的元素以上是关于使用 Prototype 使元素出现/消失的主要内容，如果未能解决你的问题，请参考以下文章
使用jQuery hover() 使元素出现但不触发动画两次