Как объединить функции и классы?

[madeas]

Ребята, подскажите, можно ли объединить три функции в один скрипт? Они фактически идентичны, выполняют одинаковые функции, но для разных блоков. Если писать еще такие, то получится много строк текста. Подскажите, как сократить код?

// добавление класса во фронт
      $(function() {
        var b = $('.btn_cls');
        b.click(function() {
          var cls = $(this).data('cls');
          $('.front').toggleClass(cls);
        });
      });

      // добавление класса в блок
      $(function() {
        var b = $('.bSd_cls');
        b.click(function() {
          var cls = $(this).data('cls');
          $('.bSd').toggleClass(cls);
        });
      });

      // убрать/добавить display
      $(function() {
        var b = $('.btn_dis_cls');
        b.click(function() {
          var cls = $(this).data("cls");
          $('#display').toggleClass(cls);
        });
      });

[Aetae]

Очевидное решаение - простой цикл:

$(function() {
  [
    {
      element: '.btn_cls',
      target:  '.front'
    },{
      element: '.bSd_cls',
      target:  '.bSd' 
    },{
      element: '.btn_dis_cls',
      target:  '#display'
    }
  ].forEach(function(item){
    $(item.element).click(function() {
      var cls = $(this).data('cls');
      $(item.target).toggleClass(cls);
    })
  });
});

Но удобнее если таких элементов много - сделать глобальный обработчик и сделать некую связь меж целевыми элементами. Примерно так:

$(function() {
  $( "body" ).on( "click", ".toggle-target", function() {
    var cls = $(this).data('cls');
    var target = $(this).data('target');
    $(target).toggleClass(cls);
  });
});

Где каждому элементу, реагирующему на клик прописывается дополнительный класс "toggle-target", а также атрибут "data-target" содержащий селектор для цели.

[Nexus]

function func(controller, target) {
    $(controller).click(function() {
        $(target).toggleClass(
            $(this).data('cls')
        );
    });
};

func('.btn_cls','.front');
func('.bSd_cls','.bSd');
func('.btn_dis_cls','#display');

[madeas]

Aetae,
пока всего три функции, но возможно их скоро станет больше, поэтому озадачился... В любом случае, хотя бы кода меньше будет

[madeas]

Ребята, спасибо. Подойдет.

[j0hnik]

$(function() {
	[['.btn_cls','.front'],
	['.bSd_cls','.bSd'] ,
	['.btn_dis_cls','#display']].forEach(function(item){
		$(item[0]).click(function() {
			var cls = $(this).data('cls');
			$(item[1]).toggleClass(cls);
		});
	});
});

[Aetae]

j0hnik, тож самое что и у меня, но не так няшно.)

[j0hnik]

Aetae,
да, не по феншую, но компактней.
что означают эти магические цифры? 29375, 35

[madeas]

j0hnik,
это где вы их нашли?)

[Aetae]

j0hnik, если разгадаешь - будешь разочарован.)