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

由 javascript 可折疊事件偵聽器呈現的按鈕不起作用

首頁猿問由 javascript...

由 javascript 可折疊事件偵聽器呈現的按鈕不起作用

JavaScript

鴻蒙傳說 2023-05-19 16:23:05

我正在嘗試使用 firebase 實時數據庫創建一個筆記保護程序，筆記的子集是可折疊的（顯示文本）但是在使用 javascript 呈現來自 firebase 的內容后，可折疊按鈕被停用firebase.auth().onAuthStateChanged(function (user) { if (user) { var userId = firebase.auth().currentUser.uid; var urlRef = firebase.database().ref("/user/" + userId + "/note/"); urlRef.once("value", function (snapshot) { snapshot.forEach(function (data) { var subject = data.val().Subject; var text = data.val().Note; var date = data.val().Date; content += '<button style="font-weight: 900;" type="button" class="collapsible"> ' + subject + ' <span style="float: right;">' + date + '</span></button> '; content += '<div class="content"> <p>' + text + '</p></div>'; }); $('#my_notes').append(content); }); }});可折疊功能的代碼是這樣的 var coll = document.getElementsByClassName("collapsible");var i;for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function () { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } });}

查看完整描述

1 回答

慕神8447489

TA貢獻1780條經驗獲得超1個贊

可能創建具有功能的按鈕和內容段落document.createElement('el');并立即添加事件偵聽器可能會更好。... 是這樣的：

firebase.auth().onAuthStateChanged(function (user) {

if (user) {

var userId = firebase.auth().currentUser.uid;

var urlRef = firebase.database().ref("/user/" + userId + "/note/");

urlRef.once("value", function (snapshot) {

snapshot.forEach(function (data) {

var subject = data.val().Subject;

var text = data.val().Note;

var date = data.val().Date;

// create button to contain subject and date

const button = document.createElement('button');

button.classList.add('collapsible');

button.style.fontWeight = 900;

button.innerHTML = `${subject} <span style="float: right;">${date}</span>`;

// create paragraph to contain content and hide it

const content = document.createElement('p');

content.textContent = text;

content.style.display = 'none';

// add button and content to notes

$('#my_notes').append(button);

$('#my_notes').append(content);

// add click event listener to button

button.addEventListener('click', (event) => {

event.target.classList.toggle('active');

const content = event.target.nextElementSibling;

if (content.style.display == 'block') {

content.style.display = 'none';

} else {

content.style.display = 'block';

}

});

}

});

反對回復 2023-05-19

1 回答
0 關注
146 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

由 javascript 可折疊事件偵聽器呈現的按鈕不起作用

由 javascript 可折疊事件偵聽器呈現的按鈕不起作用

1 回答

添加回答