Как можно сократить этот js код?

Question

[z1oN]

У меня есть такой код. Как его можно сократить?

$(document).ready(function(){
   $('#info').click(function(){
      $.ajax({
         url: "info.html",
         success: function(html){
             $('#text_0').html(html);
         }
      }); 
   }); 
    
   $('#sg2002').click(function(){
      $.ajax({
         url: "side/sg2002.html",
         success: function(html){
             $('#text_0').html(html);
         }
      }); 
   });
   
   $('#sg20003').click(function(){
      $.ajax({
         url: "side/sg2003.html",
         success: function(html){
             $('#text_0').html(html);
         }
      }); 
   });
   
   $('#sg989').click(function(){
      $.ajax({
         url: "side/sg98.html",
         success: function(html){
             $('#text_0').html(html);
         }
      }); 
   });
   
   $('#gib').click(function(){
      $.ajax({
         url: "side/gib.html",
         success: function(html){
             $('#text_0').html(html);
         }
      }); 
   });
});

Answer 1

[Rsa97]

Использовать класс и data-атрибут вместо id.

$('.link').click(function() {
  $.ajax({
    url: $(this).data('url'),
    success: function(html) {
      $('#text_0').html(html);
    }
  });
});

Answer 2

[Пашенька]

Минифицировать, разве что)

Здесь нечего сокращать, но можно оптимизировать: сохранить, как минимум, $('#text_0') в переменную, а не искать её всякий раз:

const $elem = $('#text_0');

...
success: function(html){
    $elem.html(html);
}
...

И можно написать враппер:

const $elem = $('#text_0');
function ajax(selector, url) {
	$(selector).on('click', function(){
		$.ajax({
			url: url,
			success: function(html){
				$elem.html(html);
			}
		});
	});
}

Использование:

ajax('#gib', 'side/gib.html');
ajax('#sg989', 'side/sg98.html');

и т.д.

Comments

[z1oN]

Большое спасибо)