Создание элементов, которые появляются / исчезают с Prototype - PullRequest
Новая
       28

Создание элементов, которые появляются / исчезают с Prototype

0 голосов
/ 16 апреля 2020

Мне нужно, чтобы элементы make внутри элемента div появлялись и исчезали при нажатии на элемент div. Когда веб-страница загружается, она должна просто сказать «Нажмите здесь». После нажатия под оригинальным текстом должен появиться новый текст с надписью «Нажмите сюда еще раз». После повторного нажатия появляется новый текст под надписью «Нажмите еще раз». После повторного нажатия весь этот текст будет удален, и появится новый текст с надписью «Спасибо». После повторного нажатия этот текст будет удален, и появится новый текст, говорящий «До свидания». После повторного щелчка все будет удалено, включая поле, в котором отображается текст. Я новичок в этом, и я не знаю, что я делаю, и даже не могу получить всплывающее сообщение, когда 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;
}

Ответы [ 2 ]

0 голосов
/ 16 апреля 2020

Вот примерное решение вашей проблемы в jQuery, вы можете просто перевести логи c на 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()

0 голосов
/ 16 апреля 2020

Для начала установите наблюдатель клика для div и всех его дочерних элементов: 

$("div").observe('click', myHandler);

Затем выполните операцию show / hide в 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>
...