Как сократить код в одну функцию?

Question

[Валерий]

$(document).ready(function () {	
  $('.txt-1').click(function() { 
    $('.txt').removeClass('txt-active'); 
    $('.txt-1').addClass('txt-active'); 
    $('.pull-right .img').hide(); 
    $('.pull-right .img-1').fadeIn(); 
    return false; 
  });
  $('.txt-2').click(function() { 
    $('.txt').removeClass('txt-active'); 
    $('.txt-2').addClass('txt-active'); 
    $('.pull-right .img').hide(); 
    $('.pull-right .img-2').fadeIn(); 
    return false; 
  });
  $('.txt-3').click(function() { 
    $('.txt').removeClass('txt-active'); 
    $('.txt-3').addClass('txt-active'); 
    $('.pull-right .img').hide(); 
    $('.pull-right .img-3').fadeIn(); 
    return false; 
  });
});

Может как-то правильно реализовать через

var count = 0;
count++;

Но как именно?

Answer 1

[Nikolay Talanov]

Убираешь нафиг txt-1/txt-2/txt-n классы у элементов, вместо этого добавляешь им дата-аттрибуты с айдишниками. Аля data-id="2". Через делегирование вешаешь один обработчик на все .txt элементы. Внутри получаешь их id из атрибута, затем у активного элемента убираешь active-класс, текущему (кликнутуму) его добавляешь, затем прячешь все .img (тут на самом деле тоже лучше поменять с hide/fadein на классы, но это уже не моя проблема) и показываешь нужный с помощью полученного ранее id.

$(document).on("click", ".txt", function(e) {
  e.preventDefault();

  var id = $(this).data("id");

  $(".txt.txt-active").removeClass("txt-active");
  $(this).addClass("txt-active");
  $(".pull-right .img").hide();
  $(".pull-right .img-"+id).fadeIn();
});