Как AJAX скрипт сделать универсальным для нескольких классов?

Question

[Cheizer]

Друзья, подскажите пожалуйста как сделать AJAX более универсальным? Есть код AJAX и он работает, тут порядок, но работает для одного контейнера с классом ajax-container, если я добавляю еще один контейнер, то перестает работать. Как это персонализировать? Куда добавить THIS? Немного разбираюсь в JS и не пойму как это исправить. :( Подскажите пожалуйста.

$(function() {
	       var fadeSpeed = 200, // Fade Animation Speed
			ajaxContainerSelector = '.ajax-container', // CSS Selector of Ajax Container
			ajaxItemSelector      = '.ajax-item', // CSS Selector of Ajax Item
			ajaxFormSelector      = '.ajax-form'; // CSS Selector of Ajax Filter Form
	$('' + ajaxFormSelector + '').submit(function() {
		return false;
	});
	function ajaxMainFunction() {
		$.ajax({
			data: $(ajaxFormSelector).serialize()
		}).done(function(response) {
			var $response = $(response);
			$(ajaxContainerSelector).fadeOut(fadeSpeed);
			setTimeout(function() {
				$(ajaxContainerSelector).html($response.find(ajaxContainerSelector).html()).fadeIn(fadeSpeed);
			}, fadeSpeed);
		});
	}
	$(''+ajaxFormSelector+' input').change(function() {
		ajaxMainFunction();
	})
	$(''+ajaxFormSelector+' select').change(function() {
        ajaxMainFunction();
    });
});

Answer 1

[Diatomiccoder]

Посмотрите в сторону методов call/apply

Comments

[Cheizer]

Спасибо почитаю, и про bind тоже.

[Diatomiccoder]

Роман Кузнецов, Вот как должен будет выглядеть код(но это не точно, не проверял)

$(function() {
  let fadeSpeed = 200, // Fade Animation Speed
    ajaxContainerSelector = '.ajax-container', // CSS Selector of Ajax Container
    ajaxItemSelector = '.ajax-item', // CSS Selector of Ajax Item
    ajaxFormSelector = '.ajax-form'; // CSS Selector of Ajax Filter Form

  $('' + ajaxFormSelector + '').submit(function() {
    return false;
  });
  
  function ajaxMainFunction() {
    let $that = $(this); 
    $.ajax({
      data: $that.parents(ajaxFormSelector).serialize()
    }).done(function(response) {
      let $response = $(response);
      $that.parents(ajaxContainerSelector).fadeOut(fadeSpeed);
      setTimeout(function() {
        $that.parents(ajaxContainerSelector).html($response.find(ajaxContainerSelector).html()).fadeIn(fadeSpeed);
      }, fadeSpeed);
    });
  }

  $('' + ajaxFormSelector + ' input').change(function() {
    ajaxMainFunction.call(this);
  });

  $('' + ajaxFormSelector + ' select').change(function() {
    ajaxMainFunction.call(this);
  });
});

[Cheizer]

Diatomiccoder, Спасибо, мысль понятна, попробую разобраться, не работает так.