Стоит задача превратить это всё в ООП
давайте не так, не в ООП а просто в читабельный и поддерживаемый код.
- избавьтесь от дублирования кода. Вынесите для начала все действия в отдельные функции. Например:
$("#addComment").css("display", "block");
и подобные можно заменить как
// функции хэлперы для устранения дублирования
function hide(selector) {
return function () {
$(selector).css("display", "none");
};
}
function show(selector) {
return function () {
$(selector).css("display", "block");
};
}
// специализированные хэлперы с говорящими названиями
var showCommentsForm = show("#form");
var hideCommentsForm = hide("#form");
var showAddCommentButton = show("#addComent");
var hideAddCommentButton = hide("addComment");
идем дальше...
var counter = parseInt($("#counter span").html())+1;
$("#counter span").html(counter);
Тут явно стоит
использовать data-*. Или любой другой способ подсчета. Знать бы еще что считается, судя по всему вам надо посчитать количество сообщений. В этом случае вообще так себе идея так делать.
$(document).on("click", "input[name='send']", function (){
лучше случать сабмит формы. Обязательно устраните "глобальный поиск" по селекторам.
Ну и это не говоря о том что инлайн стили, селекторы на айдишках, шаблоны с дублированием - это путь к боли.
