• 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
104 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ź 173 wizyt
0 głosów
2 odpowiedzi 209 wizyt
pytanie zadane 17 lutego 2018 w JavaScript, jQuery, AJAX przez pebrzosky Obywatel (1,170 p.)
0 głosów
1 odpowiedź 178 wizyt
pytanie zadane 2 lipca 2017 w JavaScript, jQuery, AJAX przez Adam Ostrogórski Obywatel (1,070 p.)
Porady nie od parady
Zadając pytanie postaraj się o odpowiedni tytuł, kategorię oraz tagi.Tagi

65,755 zapytań

112,393 odpowiedzi

237,318 komentarzy

46,700 pasjonatów

Przeglądających: 115
Pasjonatów: 2 Gości: 113

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.

...