Forum PHP.pl

Witam,
Mam problem z zrobieniem przesuwania ofert, po kliknięciu w div który ma data-id="x" funkcja generuje z tablicy kod html a następnie wstawia go do diva .galery, problem w tym, że po kliknięciu na .move-left przesuwa się tylko o jedno lub wogole, dodatkowo funkcja generate_min ktora generuje html z miniaturkami zdjęć z tej samej tablicy generuje ostatnie zdjecie + nowe, a nie tylko nowe.

Klikniecie na oferte:

[HTML] pobierz, plaintext 
$('.realize').click(function(){
 
		$this = $(this);
 
		var data = $this.attr('data-id'); 
 
		$('body').append('<div class="black-screen"><div class="galery">' + generateview(data) + '</div></div>');
 
		$('.move-right').click(function(){
			data++;
			$('.galery').html(generateview(parseInt(data) + 1))
			console.log(parseInt(data) + 1)
		});
 
		$('.move-left').click(function(){
			$('.galery').html(generateview(parseInt(data) - 1))
			console.log(parseInt(data) - 1)
			data--;
		});
 
	});
[HTML] pobierz, plaintext 

Funkcja generująca miniaturki:

[HTML] pobierz, plaintext 
var min_img_for = [];
 
function generate_min(data)
{
	$.each(data_realize[data][7], function(key, value) {
		min_img_for += '<div class="img-sml"> ' + value + ' </div>';
	});
 
	return min_img_for;
}
[HTML] pobierz, plaintext 

Do funkcji generateview podaję id z atrybutu data-id po którym wyswietlam dane z tablicy.

Struktura html:

[HTML] pobierz, plaintext 
<div data-id="1" class="realize">
                <img src="img/realizacja-1.png" alt="" />
                <div class="realize-hover"></div>
                <div class="desc-realize">
                  Tablice Reklamowe (Billboard)
                </div>
              </div>
              <div data-id="2" class="realize">
                <img src="img/realizacja-1.png" alt="" />
                <div class="realize-hover"></div>
                <div class="desc-realize">
                  Tablice Reklamowe (Billboard)
                </div>
              </div>
 
i tak dalej
[HTML] pobierz, plaintext 

Sama tablica wygląda tak:

[HTML] pobierz, plaintext 
var data_realize = 
	[[
		0,
		'<img src="./img/big-img-realize.png" />',
		'Bilboard dla <br>"Galeria Krakowska"',
		'Lorem Ipsum jes...',
		'21 dni',
		'5m x 2.5m',
		'500 zł',
		['<img src="./img/min-image-realize.png" />', ''] // tu sa miniaturki
	],
];
[HTML] pobierz, plaintext 

Ten post edytował MeGusta 28.08.2016, 13:07:20

Sieczka... totalny brak logiki i jeden wielki haos....


Na poczatek masz od razu data zrzutowac na liczbe i potem mozesz normalnie dodawac i odejmowac.
var data = parseInt($this.attr('data-id'));


Jak juz raz odjales/dodales to nie rob tego ponownie w przekazywaniu do parametru.

No i patrz co piszesz bo wyglada jakbys losowo stukal w klawiature

Poprawione:

[HTML] pobierz, plaintext 
$('.realize').click(function(){
 
		$this = $(this);
 
		var data = parseInt($this.attr('data-id'));
 
		$('body').append('<div class="black-screen"><div class="galery">' + generateview(data) + '</div></div>');
 
		$('.move-right').click(function(){
			data++;
			$('.galery').html(generateview(data))
		});
 
		$('.move-left').click(function(){
			$('.galery').html(generateview(data))
			data--;
		});
 
	});
[HTML] pobierz, plaintext 

Dalej to samo, przerzuca się tylko o jedno, tak jakby data++ wykonywał się tylko raz.
Dodatkowo funkcja generate_min() tak jakby do starych zdjęć z pierwszego elementu tablicy dopisuje z drugiego elementu.

Ten post edytował MeGusta 28.08.2016, 13:18:16

Nogdzie nie widze bys aktualizowal atrybut data-id wiec dosc logiczne ze ciagle ma te sama wartosc

Zwiększam za każdym kliknięciem data++;
Próbowałem też:

[HTML] pobierz, plaintext 
var self = $this;
$('.move-right').click(function(){
	$('.galery').html(generateview(data))
	self.attr('data-id', data + 1)
});
[HTML] pobierz, plaintext 

Ale dalej to samo.

Co z tego ze zwiekszasz jak i tak za kazdym razem to nadpisujesz o tutaj:
var data = $this.attr('data-id');


Bo nie zerujesz min_img_for

Właśnie tu problem leży, że po kliknieciu na div .realize otwiera się okno i to wszystko jest w nim generowane, nie mam pojęcia jak to var data wyrzucić poza aby się nie nadpisywało na początku.

Dobrze by bylo jakbys to wystawil online

https://jsfiddle.net/9gh9h1f3/2/

Przesuwa się tymi strzałkami po prawo na dole.

Ten post edytował MeGusta 28.08.2016, 13:45:44

A mozesz te strzalki dac na gore? Bo na moim lapku niestety nie jestem w stanie ich siegnac

Jasne, proszę bardzo.

https://jsfiddle.net/9gh9h1f3/3/

W prawo przesuwa ci sie tylko raz, bo jak klikniesz na to to nadpisujesz zawartosc diva nowym htmlem przez co tracisz przypisania click. Albo zainteresuj sie ON w jquery albo po kazdym nadpisaniu kodu html generuj nowe CLICK dla strzalek

Masz na myśli abym generował onclick dla strzałek?

Teraz generujesz CLICK dla strzales w momencie otworzenia okna. Gdy klikasz strzalke nadpisujesz stare strzalki nowymi i nowe strzalki nie maja juz CLICK. Albo wiec uzyj ON ktore bedzie sie podczepiac pod kazde strzalki albo za kazdym nadpisaniem okna tworz CLICK na nowo

Kurcze nie rozumiem, moze dla tego ze dopiero zaczynam z javascriptem. Mógłbyś dać jakis przykład?

W skrócie. Każdy element tak długo ma zdarzenia, jak długo występuje w dokumencie i nie zostanie nadpisany lub zdarzenie usunięte. Chyba że zdarzenie nasłuchuje rodzic wtedy nowo utworzony element będzie wiedział jak się zachować. Tu masz to opisane.

Jeśli uzyję .on('click', function(){}) i potem .off() stracę this i np. wyłaczanie okna nie bedzie działac.

Dlaczego masz this stracić? Albo można je przepisać do innej zmiennej albo przyjrzyj się w konsoli takim właściwościom jak event.delegateTarget

Kurcze, siedze od rana nad tym i chyba nic sam nie wskóram, za mało jeszcze potrafię, cały czas sie uczę. Mógłby ktoś pomóc mi z tym kodem? Bardzo bym prosił.

Jedyne co miales zrobic to zamienic CLICK na ON. W czym problem?