首頁猿問使用 Prototype...

使用 Prototype 使元素出現/消失

JavaScript

慕村225694 2022-07-01 15:53:09

我需要使 div 中的 make 元素在單擊 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 回答

楊__羊羊

TA貢獻1943條經驗獲得超7個贊

這是您在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()

反對回復 2022-07-01

智慧大石

TA貢獻1946條經驗獲得超3個贊

對于初學者，為 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;

}

<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>

反對回復 2022-07-01

2 回答
0 關注
129 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用 Prototype 使元素出現/消失

使用 Prototype 使元素出現/消失

2 回答

添加回答