Создадим функциональную форму добавления комментариев с эффектами отображения/скрытия, имитируя взаимодействие с базой данных (в реальном приложении используется PHP).
Подготовка элементов страницы
Создадим необходимые HTML-элементы:
- div с id="comments" для отображения комментариев.
- div с id="comment1", id="comment2", id="comment3" (примеры существующих комментариев).
- div с id="comment-form" для формы добавления комментария (скрыта по умолчанию, style="display:none;").
- Кнопка с id="add-comment" и текстом «Добавить комментарий» (обработчик onsubmit="return false;" предотвращает перезагрузку страницы).
- Ссылка с id="add-comment-link" и текстом «Добавить комментарий» (обработчик onclick="return false;" предотвращает перезагрузку страницы).
<div id="comments">
<div id="comment1">Комментарий 1</div>
<div id="comment2">Комментарий 2</div>
<div id="comment3">Комментарий 3</div>
</div>
<div id="comment-form" style="display:none;">
<form id="comment-form-submit" onsubmit="return false;">
<textarea name="comment" id="comment-text"></textarea>
<input type="submit" id="comment-submit" value="Добавить">
</form>
</div>
<a href="#" id="add-comment-link" onclick="return false;">Добавить комментарий</a>JavaScript-функции
Напишем JavaScript-функции для управления формой:
Отображение/скрытие формы
При клике на ссылку «Добавить комментарий» функция скрывает ссылку и отображает форму, используя метод replaceWith.
$(document).ready(function() {
$('#add-comment-link').click(function() {
$('#comment-form').show();
$(this).remove(); //Удаление ссылки
});
});Добавление комментария
При отправке формы функция получает текст комментария, имитирует загрузку с сервера и добавляет комментарий в блок #comments.
$(document).ready(function() {
$('#comment-form-submit').submit(function() {
let comment = $('#comment-text').val();
// Имитация загрузки с сервера
alert('Подождите, идёт загрузка комментариев...');
$('#comments').append('<p>' + comment + '</p>');
return false;
});
});Используем $(document).ready() для обеспечения выполнения кода после полной загрузки страницы. Загрузка комментариев с сервера в этом примере симулируется. В реальном приложении необходим код для взаимодействия с сервером (PHP).
Стиль
Добавим стили:
#comment-form {
width: 300px;
height: 100px;
}
#comment-text {
width: 280px;
height: 80px;
}Получена работающая форма добавления комментариев с эффектами отображения/скрытия, демонстрирующая возможности jQuery. Для полноценной работы с базой данных необходимо использовать PHP или другую серверную технологию. Пример показывает использование jQuery для создания интерактивных элементов.