[英]How to make modal window accurately reflect contents of each note in a note-taking app?
I am fairly new to javascript, and am working on a note-taking app to practice some things I have learned so far.我对 javascript 还很陌生,正在开发一个笔记应用程序来练习我迄今为止学到的一些东西。 It all works fine, however, when I click on the Read More button to view overflow text of the note, it displays the text from the most recent note, as opposed to the note I click Read More on.
一切正常,但是,当我单击“阅读更多”按钮查看笔记的溢出文本时,它会显示最新笔记中的文本,而不是我单击“阅读更多”的笔记。 I want the entire text of a particular note to be displayed when its corresponding Read More button is pressed.
我希望在按下相应的“阅读更多”按钮时显示特定笔记的整个文本。 Am I overthinking this?
我是不是想多了? I think some kind of implementation of for...of, or for loops may help me achieve this outcome.
我认为 for...of 或 for 循环的某种实现可能会帮助我实现这一结果。 This is a link to my codepen: https://codepen.io/oliverc96/pen/xxdZYrr
这是我的代码笔的链接: https ://codepen.io/oliverc96/pen/xxdZYrr
const addNote = document.querySelector('.add-note');
const newNote = document.querySelector('#new-note');
const noteFeed = document.querySelector('#note-feed');
let modalBg = document.createElement('div');
let modalWindow = document.createElement('div');
let exitSymbol = document.createElement('i');
let modalText = document.createElement('p');
function expandNote() {
modalWindow.classList.add('enterAnimation');
modalBg.style.visibility = 'visible';
exitSymbol.addEventListener('click', () => {
modalBg.style.visibility = 'hidden';
modalWindow.classList.remove('enterAnimation');
})
}
function createNote() {
const noteContainer = document.createElement('div');
noteContainer.classList.add('containerStyle');
let noteHeader = document.createElement('h1');
const noteNum = noteFeed.childElementCount;
noteHeader.innerText = `Note #${noteNum + 1}`;
noteHeader.classList.add('headerStyle');
noteContainer.append(noteHeader);
let noteText = document.createElement('p');
noteText.innerText = `${newNote.value}`;
noteText.classList.add('paraStyle');
noteContainer.append(noteText);
let readMore = document.createElement('button');
readMore.innerText = 'Read More';
readMore.classList.add('btnStyle');
noteContainer.append(readMore);
noteFeed.append(noteContainer);
readMore.addEventListener('click', expandNote);
modalBg.classList.add('modal-bg');
modalWindow.classList.add('modal-window');
exitSymbol.className = 'far fa-times-circle';
exitSymbol.classList.add('exitSymbol');
modalWindow.append(exitSymbol);
modalText.classList.add('fullTextStyle');
modalText.innerText = `${noteText.innerText}`;
modalWindow.append(modalText);
modalBg.append(modalWindow);
noteContainer.append(modalBg);
newNote.value = '';
}
addNote.addEventListener('click', createNote);
newNote.addEventListener('keyup', function(e) {
if (e.keyCode === 13) {
e.preventDefault();
createNote();
}
})
Actually your modalText
will always store the latest value according to your code.实际上,您的
modalText
将始终根据您的代码存储最新值。 You can follow the following steps to solve this.您可以按照以下步骤解决此问题。
data-attribute
to that noteText
.data-attribute
附加到该noteText
。read more
pass the id of that specific note.read more
传递该特定笔记的 id。element
using data-attribute
.data-attribute
获取element
。 You can check my implementation.你可以检查我的实现。
console.clear(); const addNote = document.querySelector('.add-note'); const newNote = document.querySelector('#new-note'); const noteFeed = document.querySelector('#note-feed'); let modalBg = document.createElement('div'); let modalWindow = document.createElement('div'); let exitSymbol = document.createElement('i'); let modalText = document.createElement('p'); function expandNote(noteContainer, noteNum) { return function () { modalWindow.classList.add('enterAnimation'); modalBg.style.visibility = 'visible'; exitSymbol.addEventListener('click', () => { modalBg.style.visibility = 'hidden'; modalWindow.classList.remove('enterAnimation'); }) const data = document.querySelector(`[data-id='${noteNum}']`).innerText; showMoreModal(noteContainer, data); } } function showMoreModal(noteContainer, data) { modalBg.classList.add('modal-bg'); modalWindow.classList.add('modal-window'); exitSymbol.className = 'far fa-times-circle'; exitSymbol.classList.add('exitSymbol'); modalWindow.append(exitSymbol); modalText.classList.add('fullTextStyle'); modalText.innerText = `${data}`; modalWindow.append(modalText); modalBg.append(modalWindow); noteContainer.append(modalBg); } function createNote() { const noteContainer = document.createElement('div'); noteContainer.classList.add('containerStyle'); let noteHeader = document.createElement('h1'); const noteNum = noteFeed.childElementCount; noteHeader.innerText = `Note #${noteNum + 1}`; noteHeader.classList.add('headerStyle'); noteContainer.append(noteHeader); let noteText = document.createElement('p'); noteText.innerText = `${newNote.value}`; noteText.classList.add('paraStyle'); noteText.setAttribute('data-id', noteNum); noteContainer.append(noteText); let readMore = document.createElement('button'); readMore.innerText = 'Read More'; readMore.classList.add('btnStyle'); noteContainer.append(readMore); noteFeed.append(noteContainer); readMore.addEventListener('click', expandNote(noteContainer, noteNum)); newNote.value = ''; } addNote.addEventListener('click', createNote); newNote.addEventListener('keyup', function(e) { if (e.keyCode === 13) { e.preventDefault(); createNote(); } })
* { padding: 0; margin: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } #wrapper { width: 1600px; height: 100vh; margin: auto; text-align: center; } h1 { font-size: 100px; margin-top: 20px; font-weight: 500; } h2 { font-size: 50px; font-weight: 400; margin-top: 10px; } #add-new-note { color: rgb(0, 153, 153); } textarea { width: 1500px; margin-top: 30px; height: 60px; border-radius: 6px; padding: 20px; font-size: 18px; } textarea:focus { outline-color: black; } .add-note { font-size: 20px; width: 180px; height: 50px; border-radius: 6px; margin-top: 30px; background-color: rgb(0, 153, 153); color: white; border-style: solid; border-color: rgb(0, 102, 102); } .add-note:hover { background-color: rgb(0, 128, 128); cursor: pointer; } #note-feed { background-color: rgb(0, 153, 153); height: 500px; margin-top: 25px; width: 1500px; border-radius: 6px; display: flex; overflow: scroll; flex-wrap: wrap; padding: 20px 10px; margin-left: 50px; } .containerStyle { display: flex; flex-direction: column; justify-content: space-around; background-color: rgb(169, 169, 214); height: 48%; width: 31%; margin-right: 11px; margin-left: 20px; border-radius: 6px; margin-bottom: 20px; overflow: hidden; padding: 0 28px; padding-bottom: 15px; text-align: left; } .headerStyle { font-size: 30px; } .paraStyle { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 18px; text-overflow: ellipsis; overflow: hidden; } .btnStyle { font-size: 20px; width: 150px; height: 40px; border-radius: 6px; background-color: rgb(255, 128, 128); color: white; border-style: solid; border-color: rgb(255, 77, 77); align-self: left; } .btnStyle:hover { background-color: rgb(255, 102, 102); cursor: pointer; } .modal-bg { z-index: 1; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.5); color: white; display: flex; justify-content: center; align-items: center; visibility: hidden; overflow: scroll; } .modal-window { border-radius: 6px; background: white; width: 70%; min-height: 30%; max-height: 70%; overflow: scroll; display: flex; justify-content: flex-start; align-items: flex-start; } .enterAnimation { animation-name: fadeInDown; animation-duration: 1s; } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-200px); } 100% { opacity: 1; } } .exitSymbol { color: rgb(0, 128, 128); font-size: 30px; margin: 20px 20px; } .exitSymbol:hover { cursor: pointer; opacity: 0.8; } .fullTextStyle { color: black; width: 90%; height: 80%; text-align: left; margin-top: 60px; margin-bottom: 30px; font-size: 18px; }
<html> <head> <title> Note Taker </title> <link type="text/css" href="notes.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet"> </head> <body> <div id="wrapper"> <h1> Note Taker </h1> <h2 id="add-new-note"> Add A New Note: </h2> <textarea id="new-note" name="note-box" placeholder="Write your note here"></textarea> <button class="add-note"> Add Note </button> <div id="note-feed"> </div> </div> <script src="notes.js"></script> <script src="https://kit.fontawesome.com/6fc6f370ca.js" crossorigin="anonymous"></script> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.