已解決430363個問題，去搜搜看，總會有你想問的

如何通過單擊 div 來切換 div 可見性？

首頁猿問如何通過單擊 div 來切換...

如何通過單擊 div 來切換 div 可見性？

JavaScript

躍然一笑 2023-03-03 10:46:25

我正在嘗試做一個帶有多個選擇按鈕的視覺小說小游戲，它會略微或更多地改變故事、圖像、文本框等……如果沒有 javascript，這就像……完全不可能?；蛘呖赡?，但它需要數十萬頁。誰知道。我想避免這種情況。所以...有沒有辦法用另一個類似但不可見的 div 的內容多次（需要時也是 100 次）替換可見 div 的內容 -id="d01"例如 - 包括 javascript 和 css - 使不可見的 div 可見，隱藏以前，但點擊 div 本身？我只能找到只能使用一次的切換和替換，然后返回到第一個內容，但我正在尋找有點不同的東西。逐漸變化的東西，從 div 1 到 div 100 或更多。我在智能手機上工作，所以編譯器或視覺小說編輯器對我來說是遙不可及的。但通常網站和其他小東西，也有一點 java，對我有用。所以我認為這不會大驚小怪。我知道一切都有些混亂。對不起。<div id="d01"></div><div id="d02" style="display:none;"></div><div id="d03" style="display:none;"></div><div id="d0#"> style="display:none;"></div>

查看完整描述

1 回答

皈依舞

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

div而不是在 HTML 中有很多，你可以只使用一個div并使用 javascript 動態替換它的內容

首先，在 html 中創建一個 div 元素，讓我們把它dialogBox作為它的 id

</div>

在javascript中，像這樣將對話框聲明為數組

const dialogs = [

{

id: '01',

text: "Content to show at the beginning, with everything it could come to my mind: text, buttons, images, animations... ;"

{

id: '02',

text: "Content to show after the second click, like as above;"

{

id: '03',

text: "Content to show after the n. click... U got it at this point, i think;"

}

];

放什么取決于你，但在這種情況下，我只是放text和id。id目前并不是真正必要的，但我們可以用它來查詢，因為將來會有數百個。

現在，找到我們的div元素并將其存儲到一個變量中

const dialogBox = document.getElementById('dialogBox');

最后，我們現在可以更新/替換我們的div內容。在這個例子中，我們將在每次鼠標點擊時更新內容

let index = 0;

dialogBox.innerHTML = dialogs[index].text

window.addEventListener('click', () => {

index = (index < dialogs.length - 1) ? ++index : index;

dialogBox.innerHTML = dialogs[index].text

});

在上面的示例中，我們將div其內容的 innerHTML 設置為當前對話框文本。然后，index每次單擊鼠標時將值增加 1，然后再次更新 innerHTML。

反對回復 2023-03-03

1 回答
0 關注
113 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

如何通過單擊 div 來切換 div 可見性？

如何通過單擊 div 來切換 div 可見性？

1 回答

添加回答