Дублирование модального содержимого

Таким образом, кнопка работает, содержимое работает нормально, но пока я не нажму на кнопку, она дублирует содержимое первого массива, я пытался использовать решения для других ответов в другом сообщении stackoverflow, но они мне не помогают и не работают. Пожалуйста помоги

each note in notes
  a(class='clickablebox', class='link', data-toggle='modal', data-target='#infoModal#{note.id}') #{note.title}
  div(class='modal fade', id='infoModal#{note.id}', tabindex='-1', role='dialog', aria-labelledby='infoModalLabel', aria-hidden='true')
    .modal-dialog.modal-dialog-centered(role='document', id='#{note.id}')
      .modal-content
        .modal-header
          h5#infoModalTitle.modal-title #{note.title}
          button.close(type='button' data-dismiss='modal' aria-label='Close') 
            i(class='fa fa-times')     
        .modal-body
          | #{note.content}

Заметки это [{'id': 'e', title: 'a', content: 'content'}, {'id': 'a', title: 'e', content: 'content'}]]

Пытался: Дублируется при повторении цикла в нефритеВставьте динамические данные в модальный бутстрап из объекта массива – vanilla javascript

И другие, которые должны добавить идентификатор к каждому модальному

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

Ten Digit Grid 20.03.2022 23:56

@serayman сделал!

sldless 21.03.2022 00:32

Обратите внимание, что этот код приведет к тому, что у вас будет несколько одинаковых атрибутов id в одном документе, что является недопустимым HTML.

Sean 21.03.2022 16:46
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
3
33
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

так что это выглядело как «infoModal # {note.id}», поэтому мне просто нужно было сделать «infoModal» + note.id

Другие вопросы по теме