Всё же пересмотрел всё и сделал по-другому. Теперь всё работает за одним нюансом: в форме, которая появляется по клику, должна быть по умолчанию checked радиокнопка со значением "Рабочий"
http://skrinshoter.ru/s/250718/TyFOJplt?a. Если же кликнуть ещё раз "Добавить ещё", то при появлении второй формы у первой этот checked слетает
http://skrinshoter.ru/v/250718/tnU6aud9?a, хотя должен оставаться. Причём эта проблема только при появлении второй формы, дальше - третья, четвёртая и т.д. - добавляются с чекнутой радиокнопкой, как и должно быть. Может, кто-то подскажет, в чём дело и как это исправить? Вот код:
<form class="lk-address-form js-validate js-lk-address-form" action="javascript:;" method="get">
<h2 class="lk-address-form__title">Мои адреса</h2>
<p class="lk-address-form__no-address js-lk-address-form-no-address">Вы не добавили еще ни одного адреса.</p>
<div class="lk-address-form__container js-lk-address-form-container">
<!--вставляется js-ом-->
</div>
<div class="lk-address-form__btn-container">
<a class="lk-address-form__save btn btn--colored visually-hidden js-lk-address-submit js-submit" href="javascript:;">Сохранить</a>
<a class="lk-address-form__add btn btn--colored js-add-address-btn" href="javascript:;">Добавить <span class="visually-hidden">ещё</span></a>
</div>
</form>
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.$lkAddressContainer = self.$element.find('.js-lk-address-form-container');
self.$lkNoAddress = self.$element.find('.js-lk-address-form-no-address');
self.$lkAddressSubmit = self.$element.find('.js-lk-address-submit');
self.$addAddressBtn = self.$element.find('.js-add-address-btn');
// функции инициализации
self.setListeners();
}
setListeners() {
const self = this;
self.$addAddressBtn.on('click', (e) => {
self.addAddress();
self.indexingAttributes(['label', 'htmlFor'], ['input', 'name'], ['input', 'id']);
self.showHideElems(e);
});
self.$lkAddressContainer.on('click', (e) => {
if ($(e.target).hasClass('js-delete-address-btn')) {
self.deleteAddress(e);
self.indexingAttributes(['label', 'htmlFor'], ['input', 'name'], ['input', 'id']);
}
self.showHideElems(e);
});
}
//добавляет одну форму с адресом
addAddress() {
const self = this;
self.$lkAddressContainer.append(`<div class="lk-address-form__one-address js-lk-one-address">
<div class="lk-address-form__address-top">
<div class="radio-block">
<span class="radio-block__title">Тип адреса: </span>
<div class="radio-block__box">
<div class="input-radio">
<input class="input-radio__input" type="radio" id="work-1" name="address-type-1" checked>
<label class="input-radio__label" for="work-1">Рабочий</label>
</div>
<div class="input-radio">
<input class="input-radio__input" type="radio" id="home-1" name="address-type-1">
<label class="input-radio__label" for="home-1">Домашний</label>
</div>
</div>
</div>
<a class="link link--colored js-delete-address-btn" href="javascript:;">Удалить</a>
</div>
<div class="lk-address-form__input-fields">
<div class="input-text js-parent-input-error">
<label class="input-text__label" for="where-1">Город</label>
<input class="input-text__input" type="text" id="where-1" name="where-1" placeholder="" required>
<div class="error-message error-message--static"></div>
</div>
<div class="input-text js-parent-input-error">
<label class="input-text__label" for="street-1">Улица</label>
<input class="input-text__input" type="text" id="street-1" name="street-1" placeholder="" required>
<div class="error-message error-message--static"></div>
</div>
<div class="lk-address-form__input-complex">
<div class="input-text js-parent-input-error">
<label class="input-text__label" for="house-1">Дом</label>
<input class="input-text__input" type="text" id="house-1" name="house-1" placeholder="" required digits="true">
<div class="error-message error-message--static"></div>
</div>
<div class="input-text js-parent-input-error">
<label class="input-text__label" for="building-1">Корпус</label>
<input class="input-text__input" type="text" id="building-1" name="building-1" placeholder="" digits="true">
<div class="error-message error-message--static"></div>
</div>
<div class="input-text js-parent-input-error">
<label class="input-text__label" for="flat-1">Квартира</label>
<input class="input-text__input" type="text" id="flat-1" name="flat-1" placeholder="" digits="true">
<div class="error-message error-message--static"></div>
</div>
</div>
</div>
</div>`);
}
//удаляет одну форму с адресом
deleteAddress(e) {
const self = this;
$(e.target).closest('.js-lk-one-address').remove();
}
//показывает/скрывает фразу "Вы не добавили ещё ни одного адреса", кнопку "Сохранить", видоизменяет кнопку "Добавить"
showHideElems(e) {
const self = this;
if ($(e.target).hasClass('js-add-address-btn') && !self.$lkAddressContainer.find('.js-lk-one-address').length == 0) {
self.changeClasses(self.$lkNoAddress, 'visually-hidden');
self.changeClasses(self.$lkAddressSubmit, null, 'visually-hidden');
self.changeClasses($(e.currentTarget), 'link link--colored', 'btn btn--colored');
self.changeClasses(self.$addAddressBtn.find('span'), null, 'visually-hidden');
}
if (self.$lkAddressContainer.find('.js-lk-one-address').length == 0) {
self.changeClasses(self.$lkNoAddress, null, 'visually-hidden');
self.changeClasses(self.$lkAddressSubmit, 'visually-hidden');
self.changeClasses(self.$addAddressBtn, 'btn btn--colored', 'link link--colored');
self.changeClasses(self.$addAddressBtn.find('span'), 'visually-hidden');
}
}
//добавляет, удаляет классы у элементов, нужна для работы выше расположенной функции
changeClasses(elemToChange, classesToAdd, classesToRemove) {
const self = this;
if (classesToAdd && !classesToRemove) elemToChange.addClass(classesToAdd);
else if (!classesToAdd && classesToRemove) elemToChange.removeClass(classesToRemove);
else elemToChange.removeClass(classesToRemove).addClass(classesToAdd);
}
//пересчитывает значения id, name, for при добавлении/удалении форм, чтобы они всегда начинались с 1 и шли по порядку.
indexingAttributes(tagName, tagValue) {
const self = this;
var addresses = document.getElementsByClassName('js-lk-one-address');
for (var i = 0; i < arguments.length; i++) {
var tagName = arguments[i][0],
tagValue = arguments[i][1];
for (var j = 0; j < addresses.length; j++) {
var tagElems = addresses[j].getElementsByTagName(tagName);
var numOfElems = tagElems.length;
for (var k = 0; k < numOfElems; k++) {
tagElems[k][tagValue] = tagElems[k][tagValue].replace(/\d/, (j + 1).toString());
}
}
}
}
}
$(() => {
$('.js-lk-address-form').each((i, item) => {
new LkAddressForm(item);
});
});
