首頁猿問使用 Prototype...

使用 Prototype 使元素出現(xiàn)/消失

JavaScript

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

我需要使 div 中的 make 元素在單擊 div 時(shí)出現(xiàn)和消失。然后加載網(wǎng)頁時(shí)，它應(yīng)該只是說“單擊此處”。單擊后，在原始文本下方應(yīng)出現(xiàn)“再次單擊此處”的新文本。再次單擊后，新文本出現(xiàn)在“再次單擊”下方。再次單擊后，所有文本都將被刪除，并出現(xiàn)新的“謝謝”文本。再次單擊后，該文本被刪除，并出現(xiàn)“再見”的新文本。再次單擊后，所有內(nèi)容都被刪除，包括文本出現(xiàn)的框。我是新手，不知道自己在做什么，當(dāng) div 出現(xiàn)時(shí)，我什至無法彈出警報(bào)消息被點(diǎn)擊，看起來應(yīng)該很簡單。這是我的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代碼只是嘗試彈出警報(bào)：$(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貢獻(xiàn)1943條經(jīng)驗(yàn) 獲得超7個(gè)贊

這是您在jQuery中的問題的原始解決方案，您可以將邏輯轉(zhuǎn)移到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>

不是一個(gè)優(yōu)雅的解決方案，但這些是它的基礎(chǔ)，jQuery有一個(gè)toggle()功能，以防萬一您需要讓用戶能夠再次顯示該段落。替換.show()和.hide()_.toggle()

反對回復(fù) 2022-07-01

智慧大石

TA貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超3個(gè)贊

對于初學(xué)者，為 div 及其所有子項(xiàng)設(shè)置一個(gè)點(diǎn)擊觀察者：

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

然后在 myHandler 中執(zhí)行顯示/隱藏操作。

一個(gè)工作示例：

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

反對回復(fù) 2022-07-01

2 回答
0 關(guān)注
142 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

使用 Prototype 使元素出現(xiàn)/消失

使用 Prototype 使元素出現(xiàn)/消失

2 回答

添加回答