Создание div для каждого данных
Я пытаюсь создать div для каждых данных, Мягко говоря, то, что я пытаюсь сделать, это, Когда я опубликую, он будет добавлен в базу данных Данные, которые я добавляю на страницу со списком сообщений, будут созданы в другом разделе отдельно от других данных.
Мой HTML
<head>
<link rel = "stylesheet" href = "/css/postList.css">
</head>
<body>
<div class = "postsMain">
</div>
</body>
<script src = "https://code.jquery.com/jquery-3.6.0.min.js" integrity = "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4 = " crossorigin = "anonymous"></script>
<script src = "js/listPost.js"></script>
Подключенный JS-файл
$(function () {
$.getJSON("/admin/getposts", function (data) {
$(".postsMain").empty();
$.each(data, function (i, item) {
console.info("Data girdi")
var alt = $("<div>", {
class: "postsAlt"
}).appendTo(".postsMain");
$("<p>").html(item.title).appendTo(alt);
console.info('Başarıyla data çekildi');
});
});
});
Данные я получаю из файла JS
[
{ "title": "Https test ", "content": "https://endorfintr.tk", "sharer": "EndorfinTR" },
{ "title": "a", "content": "ÇAYLARRRRR", "sharer": "DataBaseTester", "editer": "EndorfinTR" },
{
"title": "Bakım sürecinin %75i bitti! ",
"content": "Bakım sürecinin %75inden fazlasına girmis bulunmaktayız, bu süreçte adminleri ve siteyi kökten etkileyecek bir sürü ekleme yapıldı. Örneğin Post ekleme, post silme benzeri şeyler eklendi. /n Bakım sürecinin bitiminde görüşmek üzere ??",
"sharer": "EndorfinTR",
"editer": "EndorfinTR"
},
{ "title": "Blog Websitesine Kısa Bir Ara", "content": "Merhabalar ben EndorfinTR, websiteye biraz ara vereceğim. Çünkü hostumuzda bir kaç arıza çıktı.", "sharer": "EndorfinTR" },
{ "title": "Rus - Ukrayna savaşı Müzakereleri", "content": "Rus - Ukrayna savaşı tarafları Belarus sınırında müzakere yapacak, sonuçlar için beklemeyi unutmayın!", "sharer": "ThesseliaTR" },
{ "title": "Merhabaaa", "content": "Selam", "sharer": "ThesseliaTR", "date": "09 Mart Çarşamba 2022, 21:00" }
]
.postsAlt {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 350px;
height: 250px;
border-radius: 10px;
box-shadow: 0 10px 25px 5px rgba(0, 0, 0,0.2);
background-color: #808080;
overflow: hidden;
text-align: center;
display: flex;
}
.postsAlt p {
position: absolute;
top: 0;
bottom: 1;
right: 0;
left: 0;
color: #FFFFFF;
}
Какое это имеет отношение к Angular @Pieterjan?
Эта строка $("<p>").html(item.title).appendTo(alt); добавляет название элемента к элементу alt. Вам просто нужно сделать это для content, sharer, editor и т. д.
(Поскольку фреймворки mvvm упрощают поддержку кода)
Да, сохранение кода может быть немного проще. ПОСЛЕ того, как вам удалось установить Angular и пройти все необходимое обучение, чтобы научиться создавать приложения с его помощью.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вот небольшой фрагмент, демонстрирующий, как вы можете изменить часть .each() в своем коде:
const da=[{ "title": "Https test ", "content": "https://endorfintr.tk", "sharer": "EndorfinTR" },
{ "title": "a", "content": "ÇAYLARRRRR", "sharer": "DataBaseTester", "editer": "EndorfinTR" },
{
"title": "Bakım sürecinin %75i bitti! ",
"content": "Bakım sürecinin %75inden fazlasına girmis bulunmaktayız, bu süreçte adminleri ve siteyi kökten etkileyecek bir sürü ekleme yapıldı. Örneğin Post ekleme, post silme benzeri şeyler eklendi. /n Bakım sürecinin bitiminde görüşmek üzere ??",
"sharer": "EndorfinTR",
"editer": "EndorfinTR"
},
{ "title": "Blog Websitesine Kısa Bir Ara", "content": "Merhabalar ben EndorfinTR, websiteye biraz ara vereceğim. Çünkü hostumuzda bir kaç arıza çıktı.", "sharer": "EndorfinTR" },
{ "title": "Rus - Ukrayna savaşı Müzakereleri", "content": "Rus - Ukrayna savaşı tarafları Belarus sınırında müzakere yapacak, sonuçlar için beklemeyi unutmayın!", "sharer": "ThesseliaTR" },
{ "title": "Merhabaaa", "content": "Selam", "sharer": "ThesseliaTR", "date": "09 Mart Çarşamba 2022, 21:00" }];
console.info("Data girdi")
$.each(da, function (i, item) { $(".postsMain").append(`<div class = "postsAlt">
<h3>${item.title}</h3><p>${item.content}</p>
<p>Shared by: ${item.sharer}</p><p>Edited by: ${item.editer}</p></div>`);
});
console.info('Başarıyla data çekildi');.xpostsAlt {border:1px solid grey; margin:10px 0; padding:0 10px}
.postsAlt {
margin: 20px auto;
width: 350px;
height: 250px;
border-radius: 10px;
box-shadow: 0 10px 25px 5px rgba(0, 0, 0,0.2);
background-color: #808080;
overflow: hidden;
text-align: center;
}
.postsAlt p {
color: #FFFFFF;
} <script src = "https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class = "postsMain"></div>То же самое, но я думаю, что только один, когда divs переплетаются, я должен отправить CSS?
Не могли бы вы пояснить свой комментарий? Я добавил немного CSS в свой ответ, чтобы визуализировать, что каждый ответ в массиве da будет отображаться в своем собственном <div class = "postsAlt>.
Не может быть настроен в CSS, должен ли я отправить CSS?
Все, что поможет прояснить ситуацию... ;-)
Хорошо, я добавил css.
Ну да, ваш CSS использует absolute позиционирование для всех ваших .postsAlt div. Это означает, что все они будут наложены в одном и том же месте. Вам нужно удалить атрибут position: absolute из вашего CSS и, возможно, настроить там несколько других вещей, если вы хотите, чтобы сообщения отображались друг под другом.
Большое спасибо за вашу помощь, это сработало очень хорошо для меня, но могу ли я задать вам еще один вопрос? Я центрировал div, но все они рядом. Как мы можем немного разделить их всех?
Может быть, вы можете добавить к ним немного margin-top и margin-bottom? Мой margin: 10px 0 уже предусматривает поля по 10 пикселей сверху и снизу и поля по 0 пикселей слева и справа.
Спасибо, мой вопрос заканчивается здесь. Спасибо за вашу помощь. ❤️
Вы уже использовали угловой?