Как преобразовать данный код, в функцию, чтобы ее можно было вызывать?

Question

[ArtJH]

Нужно чтобы я мог вызывать функцию, и она выполняла код, который внизу. Как это сделать?

function tap(){
    //код здесь
}
tap();      //вызов функции

$(".product-menu").on("click","label",function(e){
	// e.preventDefault();
	$('.product-menu-item').removeClass("active");
	$(this).addClass('active');
	var activeWidth = $(this).innerWidth();
	var itemPos = $(this).position();
	$(".selector").css({
		"top":itemPos.top - 7 + "px", 
		"left":itemPos.left - 15 + "px", 
		"width": activeWidth + 30 + "px"
	});
});

Если вам это поможет, то вот сайт :
https://bed.arvpro.com/
блок "НАША ПРОДУКЦИЯ" и ниже переход по менюшкам. Это выполняет данный код

Comments

[Andrew]

Что вы хотите чтобы функция делала?

[ArtJH]

Andrew, этот функционал

$(".product-menu").on("click","label",function(e){
  // e.preventDefault();
  $('.product-menu-item').removeClass("active");
  $(this).addClass('active');
  var activeWidth = $(this).innerWidth();
  var itemPos = $(this).position();
  $(".selector").css({
    "top":itemPos.top - 7 + "px", 
    "left":itemPos.left - 15 + "px", 
    "width": activeWidth + 30 + "px"
  });
});

Этот код выполняет эффект перехода менюшки

[Andrew]

ArtJH, что этот функционал? чтобы вешала обработчик клика? или чтобы удаляла класс, меняла стили?
И откуда она будет знать у какого элемента менять?

[WapSter]

$(".product-menu").on("click","label", tap)
Но откровенно говоря это фиговая функция будет. И не в плане того, что такой подходи плох, а то что код напоминает кучу бесформенной лапши.

Answer 1

[ArtJH]

function tap(e){
		let el = $(e).children("label");
		$(el).addClass('active');
		var activeWidth = $(el).innerWidth();
		var itemPos = $(el).position();
		$(".selector").css({
			"top":itemPos.top - 7 + "px", 
			"left":itemPos.left - 15 + "px", 
			"width": activeWidth + 30 + "px"
		});
	}