Как правильно спроектировать класс? class CategoryManager { constructor() { this.currentCounter = $('.category-card').length + 1; } render(categoryBlock) { this.categoryHtml = categoryBlock; $(".categories-content").append(this.categoryHtml); this.currentCounter = $('.category-card').length; } getCounter() { return this.currentCounter; } addSubcategory() { $('.category-card__subblock-' + this.getCounter()).append(addSubCategory()); console.log(this.getCounter()); } } Есть такой класс Использую его так:$(".addCategory").click(function() { let category = new CategoryManager(); $.ajax({ url: '/ctvs/manageCategory/renderCategories', type: 'POST', dateType: 'json', data: {id: category.getCounter()}, success: function(data) { category.render(data['response']); $(".categories-content").on('click', '.addSubCategory', function() { category.addSubcategory(); }); console.log(category); } }); }); Суть в том что с сервера приходит html код я его пишу в блоки. Но при создании блока в этом блоке начинается каша. Новые блоки создаются во всех уже сгенерированных. Хотя объекты же разные. Подскажите что не так
Проблема возникает из-за того, что вы прикрепляете обработчик событий к элементам внутри .categories-content каждый раз, когда вызывается метод render(). Поэтому при добавлении подкатегории обработчик срабатывает для всех элементов с классом .category-card__subblock-X, а не только для нового блока.
Для избежания этой проблемы вы можете изменить свой код следующим образом:
Вынесите обработчик события для .addSubCategory из метода render() и добавьте его один раз при инициализации класса CategoryManager:class CategoryManager { constructor() { this.currentCounter = $('.category-card').length + 1; $(".categories-content").on('click', '.addSubCategory', function() { let category = $(this).closest('.category-card').data('category'); category.addSubcategory(); }); } render(categoryBlock) { this.categoryHtml = categoryBlock; $(".categories-content").append(this.categoryHtml); this.currentCounter = $('.category-card').length; let categoryCard = $('.category-card').last(); categoryCard.data('category', this); } getCounter() { return this.currentCounter; } addSubcategory() { let subblock = $('<div class="subcategory"></div>'); $('.category-card__subblock-' + this.getCounter()).append(subblock); console.log(this.getCounter()); } }
Убедитесь, что у вас есть элемент с классом .categories-content на странице перед вызовом метода render().
Поместите созданный объект CategoryManager в элемент .category-card, чтобы иметь доступ к нему при обработке событий.
Убедитесь, что у вас правильно работает серверная часть и возвращает корректный HTML блок для каждой категории.
После внесения этих изменений, каждый экземпляр класса CategoryManager будет работать с соответствующим элементом .category-card и не будет влиять на другие элементы.
Проблема возникает из-за того, что вы прикрепляете обработчик событий к элементам внутри .categories-content каждый раз, когда вызывается метод render(). Поэтому при добавлении подкатегории обработчик срабатывает для всех элементов с классом .category-card__subblock-X, а не только для нового блока.
Для избежания этой проблемы вы можете изменить свой код следующим образом:
Вынесите обработчик события для .addSubCategory из метода render() и добавьте его один раз при инициализации класса CategoryManager:class CategoryManager {constructor() {
this.currentCounter = $('.category-card').length + 1;
$(".categories-content").on('click', '.addSubCategory', function() {
let category = $(this).closest('.category-card').data('category');
category.addSubcategory();
});
}
render(categoryBlock) {
this.categoryHtml = categoryBlock;
$(".categories-content").append(this.categoryHtml);
this.currentCounter = $('.category-card').length;
let categoryCard = $('.category-card').last();
categoryCard.data('category', this);
}
getCounter() {
return this.currentCounter;
}
addSubcategory() {
let subblock = $('<div class="subcategory"></div>');
$('.category-card__subblock-' + this.getCounter()).append(subblock);
console.log(this.getCounter());
}
}
Убедитесь, что у вас есть элемент с классом .categories-content на странице перед вызовом метода render().
Поместите созданный объект CategoryManager в элемент .category-card, чтобы иметь доступ к нему при обработке событий.
Убедитесь, что у вас правильно работает серверная часть и возвращает корректный HTML блок для каждой категории.
После внесения этих изменений, каждый экземпляр класса CategoryManager будет работать с соответствующим элементом .category-card и не будет влиять на другие элементы.