使用 Prototype 使元素出现/消失答案

【问题标题】：Making elements appear/disappear with Prototype使用 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 的东西哈哈。我现在开始取得一些进展，我让页面加载只有消息“单击此处”，并且可以在单击后添加消息“再次单击此处”，但我不知道如何制作为第二次、第三次、第四次等点击做一些不同的事情。每次单击时它都会不断添加“再次单击此处”。

标签： javascript html prototypejs

【解决方案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" 的元素