Всем привет )
Буду благодарна за подсказку в реализации описанного ниже.
Имеется страница (на bootstrap 5) с рядом различных характеристик определенного продукта, которые изначально не выводятся.
Когда на нее заходит пользователь, то ему необходимо изначально выбрать интересующий его продукт.
Вот так вот выглядит моя страница (укорочена для примера и оставлены главные блоки, по которым имеется вопрос):
<!doctype html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>Название</title>
</head>
<body>
<ul>
<li onclick="product1()">Product 1</li>
</ul>
<p id="productOne">[укажите продукт]</p>
<a href="#" id="myProduct1" data-bs-toggle="modal" data-bs-target="#blockModal">I am descreption "Product 1 (отдельная, постоянная ссылка)</a>
<script src="js/all-product.js"></script>
<!--
Содержимое "all-product.js":
function product1() {
document.getElementById("productOne").innerHTML = '<a href="#" id="myProduct1" data-bs-toggle="modal" data-bs-target="#blockModal">I am descreption "Product 1</a>"';
}
-->
<script src="js/date-for-modal.js"></script>
<!--
Содержимое "date-for-modal.js" в формате json с различными данными по по определенным "продуктам"
-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
Допустим, человек выбрал "Product 1" (продуктов на самом деле несколько, и для каждого в файле создана функция, которая меняет/обновляет данные в соответствующем div, p или теге span).
Для некоторых элементов (которые подгружаются в виде ссылок) я хотела бы вывести более подробное описание в модальном окне, но это у меня не выходит.
Отдельная ссылка, которая ничем не меняется и расположена на странице постоянно работает корректно, но такой вариант не очень подходит, так как в зависимости от выбранного продукта - ссылки разные, и должна выводится разная информация.
Изначально подумала, что проблема в выводе с помощью jQuery (файл all-product.js):
$('#productOne').html('<a href="#" id="myProduct1" data-bs-toggle="modal" data-bs-target="#blockModal">I am descreption "Product 1</a>');
изменила на такой вот формат
function product1() {
document.getElementById("productOne").innerHTML ='<a href="#" id="myProduct1" data-bs-toggle="modal" data-bs-target="#blockModal">I am descreption "Product 1</a>';
}
ничего не изменилось.
Подскажите пожалуйста, возможно ли каким-то образом подгружать данные в модельное окно после добавления/обновления элементов с контентом?! Да и вообще, возможно ли такое сделать?!
Спасибо за внимание к моему вопросу :)
Простой
