Привет всем! Есть задача: форма, которая должна изменяться при добавлении новых блоков по нажатию кнопки "Добавить"/"Добавить ещё". Блоки также могут удаляться по клику на "Удалить". Поскольку в JS новичок, делал так: в разметке только один блок с адресом, который скрывал классом. При первичной загрузке страницы и нажатии на "Добавить" снимал этот класс, а остальные блоки делал путём клонирования и вставки элемента в низ родителя при нажатии "Добавить ещё". Аналогично удаление делал до 1 блока с адресом, а последний пытался скрыть, вновь навешивая класс с display: none; Но вот проблема: если удалять блоки не с последнего до первого, а в другом любом порядке, то почему-то оставшийся один блок не скрывается никак (( не могу понять почему. И ещё хотел бы спросить:
1. Как вообще правильно делаются такие вещи - создание одинаковых блоков на странице по клике с 0 до любого числа? Мне кажется, что моя идея - первый просто скрывать и открывать, а остальные делать через JS клонированием - не очень хороша;
2. Ещё, при клонировании по нажатию кнопок "Добавить" в новом блоке появляются совпадающие id, name, for у элементов формы, что не разрешается! Как сделать, чтобы они менялись?
P.S. Прошу прощения за стили - брал файлы из проекта, там на препроцессоре написано и т.д., поэтому сюда в стили взял только класс, который скрывает блоки. Он назван некорректно, но пример работает. Спасибо всем, кто откликнется.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<form class="lk-address-form js-lk-address-form" action="javascript:;" method="get">
<h2 class="lk-address-form__title">Мои адреса</h2>
<p class="lk-address-form__no-address js-lk-no-address">Вы не добавили еще ни одного адреса.</p>
<div class="lk-address-form__container js-lk-address-container">
<div class="lk-address-form__one-address visually-hidden js-lk-one-address">
<div class="lk-address-form__address-top">
<div class="lk-address-form__address-type-toggle">
<span class="lk-address-form__address-type">Тип адреса: </span>
<div class="input-radio">
<input class="input-radio__input" type="radio" id="work-address" name="address-type">
<label class="input-radio__label" for="work-address">Рабочий</label>
</div>
<div class="input-radio">
<input class="input-radio__input" type="radio" id="home-address" name="address-type">
<label class="input-radio__label" for="home-address">Домашний</label>
</div>
</div>
<a class="link link--colored visually-hidden js-delete-address" href="javascript:;">Удалить</a>
</div>
<div class="lk-address-form__input-fields">
<div class="input-text">
<label class="input-text__label" for="address-place">Город</label>
<input class="input-text__input" type="text" id="address-place" name="address-place" placeholder="">
</div>
<div class="input-text">
<label class="input-text__label" for="address-street">Улица</label>
<input class="input-text__input" type="text" id="address-street" name="address-street" placeholder="">
</div>
<div class="lk-address-form__input-complex">
<div class="input-text">
<label class="input-text__label" for="address-house">Дом</label>
<input class="input-text__input" type="text" id="address-house" name="address-house" placeholder="">
</div>
<div class="input-text">
<label class="input-text__label" for="address-building">Корпус</label>
<input class="input-text__input" type="text" id="address-building" name="address-building" placeholder="">
</div>
<div class="input-text">
<label class="input-text__label" for="address-flat">Квартира</label>
<input class="input-text__input" type="text" id="address-flat" name="address-flat" placeholder="">
</div>
</div>
</div>
</div>
<div class="lk-address-form__btn-container">
<a class="lk-address-form__save btn btn--colored visually-hidden js-lk-address-save-btn" href="javascript:;">Сохранить</a>
<a class="lk-address-form__add btn btn--colored js-lk-address-add-btn" href="javascript:;">Добавить</a>
<a class="link link--colored visually-hidden js-lk-add-more-link" href="javascript:;">Добавить ещё</a>
</div>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
|
Код:
|
.visually-hidden {
display: none;
} |
class LkAddressForm {
constructor(element, options) {
const self = this;
self.DATA_KEY = 'lkaddressform';
// опции
self.$element = $(element);
self.$element.data(self.DATA_KEY, self);
self.options = $.extend({}, self.$element.data(), options);
//переменные
self.$lkNoAddress = self.$element.find('.js-lk-no-address');
self.$lkAddressContainer = self.$element.find('.js-lk-address-container');
self.$lkOneAddress = self.$lkAddressContainer.find('.js-lk-one-address');
self.$lkSaveBtn = self.$lkAddressContainer.find('.js-lk-address-save-btn');
self.$lkAddBtn = self.$lkAddressContainer.find('.js-lk-address-add-btn');
self.$lkAddMoreLink = self.$lkAddressContainer.find('.js-lk-add-more-link');
self.$lkdeleteBtn = self.$lkAddressContainer.find('.js-delete-address');
// функции инициализации
self.setListeners();
}
setListeners() {
const self = this;
self.$lkAddBtn.on('click', (e) => {
e.preventDefault();
self.addFirstAddress();
});
self.$lkAddMoreLink.on('click', (e) => {
e.preventDefault();
self.addMoreAddress();
});
self.$lkdeleteBtn.on('click', (e) => {
e.preventDefault();
if (self.$lkAddressContainer.find('.js-lk-one-address').length > 1) {
self.deleteOneAddress($(e.currentTarget));
} else {
self.deleteLastAddress();
}
});
}
addFirstAddress() {
const self = this;
self.$lkOneAddress.removeClass('visually-hidden');
self.$lkNoAddress.addClass('visually-hidden');
self.$lkAddBtn.addClass('visually-hidden');
self.$lkSaveBtn.removeClass('visually-hidden');
self.$lkAddMoreLink.removeClass('visually-hidden');
self.$lkdeleteBtn.removeClass('visually-hidden');
}
addMoreAddress() {
const self = this;
self.$lkOneAddress.clone(true).insertBefore('.lk-address-form__btn-container');
}
deleteOneAddress($target) {
const self = this;
$target.closest('.js-lk-one-address').remove();
}
deleteLastAddress() {
const self = this;
self.$lkOneAddress.addClass('visually-hidden');
self.$lkNoAddress.removeClass('visually-hidden');
self.$lkAddBtn.removeClass('visually-hidden');
self.$lkSaveBtn.addClass('visually-hidden');
self.$lkAddMoreLink.addClass('visually-hidden');
self.$lkdeleteBtn.addClass('visually-hidden');
}
}
$(() => {
$('.js-lk-address-form').each((i, item) => {
new LkAddressForm(item);
});
});