• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

jquery slider

0 głosów
102 wizyt
pytanie zadane 24 stycznia 2017 w JavaScript, jQuery, AJAX przez Lukasz9210 Obywatel (1,060 p.)

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();
	});


});

 

1 odpowiedź

0 głosów
odpowiedź 24 stycznia 2017 przez Olaf Siwiński Mądrala (7,140 p.)
wybrane 24 stycznia 2017 przez Lukasz9210
 
Najlepsza

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();
    });
  });
});

 

Podobne pytania

0 głosów
1 odpowiedź 159 wizyt
0 głosów
2 odpowiedzi 153 wizyt
pytanie zadane 17 lutego 2018 w JavaScript, jQuery, AJAX przez pebrzosky Obywatel (1,130 p.)
0 głosów
1 odpowiedź 153 wizyt
pytanie zadane 2 lipca 2017 w JavaScript, jQuery, AJAX przez Adam Ostrogórski Obywatel (1,070 p.)
Porady nie od parady
Forum posiada swój własny chat IRC, dzięki któremu będziesz mógł po prostu pogadać z innymi Pasjonatami lub zapytać o jakiś problem. Podstrona z chatem znajduje się w menu pod ikoną człowieka w dymku.IRC

63,266 zapytań

109,521 odpowiedzi

228,794 komentarzy

43,507 pasjonatów

Przeglądających: 177
Pasjonatów: 3 Gości: 174

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...