Как правильно спроектировать класс? 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 код я его пишу в блоки. Но при создании блока в этом блоке начинается каша. Новые блоки создаются во всех уже сгенерированных. Хотя объекты же разные.
Подскажите что не так
Как правильно спроектировать класс? 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 код я его пишу в блоки. Но при создании блока в этом блоке начинается каша. Новые блоки создаются во всех уже сгенерированных. Хотя объекты же разные.
Подскажите что не так
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 код я его пишу в блоки. Но при создании блока в этом блоке начинается каша. Новые блоки создаются во всех уже сгенерированных. Хотя объекты же разные.
Подскажите что не так
Не можешь разобраться в этой теме?
Обратись за помощью к экспертам
Гарантированные бесплатные доработки в течение 1 года
Быстрое выполнение от 2 часов
Проверка работы на плагиат
Поможем написать учебную работу
Проблема возникает из-за того, что вы прикрепляете обработчик событий к элементам внутри .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 и не будет влиять на другие элементы.