Блог

Главная - Вопросы по программированию - Как сделать так, чтобы модальное окно точно отражало содержимое каждой заметки в приложении для заметок?

Как сделать так, чтобы модальное окно точно отражало содержимое каждой заметки в приложении для заметок?

#javascript #for-loop #modal-dialog #modal-window #for-of-loop

Вопрос:

Я довольно новичок в javascript и работаю над приложением для заметок, чтобы попрактиковаться в некоторых вещах, которым я научился до сих пор. Все это работает нормально, однако, когда я нажимаю кнопку «Подробнее», чтобы просмотреть текст заметки, он отображает текст из самой последней заметки, в отличие от заметки, на которой я нажимаю «Подробнее». Я хочу, чтобы весь текст конкретной заметки отображался при нажатии соответствующей кнопки «Подробнее». Я что, слишком много об этом думаю? Я думаю, что какая-то реализация для…или для циклов может помочь мне достичь этого результата. Это ссылка на мой кодовый код: https://codepen.io/oliverc96/ручка/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();
  }
})

Ответ №1:

На самом деле вы modalText всегда будете хранить последнее значение в соответствии с вашим кодом. Вы можете выполнить следующие действия, чтобы решить эту проблему.

  1. Приложите data-attribute к этому noteText .
  2. При нажатии на read more кнопку введите идентификатор этой конкретной заметки.
  3. Теперь просто покажите внутренний текст этого выбранного элемента. Вы можете использовать querySelector, чтобы получить element использование data-attribute .

Вы можете проверить мою реализацию.

 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;700amp;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>

Комментарии:

1. Эй, чувак, спасибо за быстрый ответ! Я попытался внедрить это в свой код, но ничего не происходит, когда я нажимаю сейчас кнопку «Подробнее» — модальное окно даже не отображается. У вас есть какие-либо возможные предложения по поводу того, почему это происходит? modalBg.style.visibility = ‘видимый’; устанавливается при нажатии на кнопку «Подробнее», поэтому я не знаю, почему он не отображается

2. @Oliver пожалуйста, скопируйте весь код js из моего решения в свое. Это должно сработать.

3. Спасибо вам большое, что это сработало! Должно быть, я что-то пропустил, так как вручную внедрял это в свой код. Я никогда не знал о тегах атрибутов данных, поэтому это будет довольно полезной информацией для некоторых из моих будущих проектов!

Метки: ,