jquery slider

Question

Napisałem skrypt jQuery, coś w rodzaju slidera gdzie po kliknięciu na odnośnik za pomocą diplay pokazywany i krywany jest pewna część strony. Wszystko działa ale nie wiem czy jest to dobre rozwiązanie, czy nie da sie tego zrobic prościej, krócej

$(document).ready(function(){

	$(".trending-items-nav .show-item-1").on("click", function(){
		$(".shown").removeClass("shown").addClass("hidden");
		$(".item-1").removeClass("hidden").addClass("shown");

		$(".active-slide").removeClass("active-slide");
		$(".show-item-1").addClass("active-slide");
		
		event.preventDefault();
	});

	$(".trending-items-nav .show-item-2").on("click", function(){
		$(".shown").removeClass("shown").addClass("hidden");
		$(".item-2").removeClass("hidden").addClass("shown");

		$(".active-slide").removeClass("active-slide");
		$(".show-item-2").addClass("active-slide");
		
		event.preventDefault();
	});

	$(".trending-items-nav .show-item-3").on("click", function(){
		$(".shown").removeClass("shown").addClass("hidden");
		$(".item-3").removeClass("hidden").addClass("shown");

		$(".active-slide").removeClass("active-slide");
		$(".show-item-3").addClass("active-slide");
		event.preventDefault();
	});

	$(".trending-items-nav .show-item-4").on("click", function(){
		$(".shown").removeClass("shown").addClass("hidden");
		$(".item-4").removeClass("hidden").addClass("shown");

		$(".active-slide").removeClass("active-slide");
		$(".show-item-4").addClass("active-slide");
		event.preventDefault();
	});


});

 

Answer 1

Zamiast odwoływać się do każdego elementu osobno możesz po prostu iterować po elementach tej samej klasy. Tyle co udało mi się napisać: 

$(document).ready(function() {
  $('.trending-items-nav div[class*="show-item-"]').each(function() {
    var c = /show-item-\d+/.exec($(this).attr('class'))[0];
    var i = c.substr(c.indexOf(/-\d+/));
    $(this).click(function(e) {
      $(".shown").removeClass("shown").addClass("hidden");
      $(".item-" + i).removeClass("hidden").addClass("shown");
      $(".active-slide").removeClass("active-slide");
      $(".show-item-" + i).addClass("active-slide");
      e.preventDefault();
    });
  });
});