[JavaScript]Przesuwanie ofert. Opcje

[MeGusta]

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

[nospor]

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

[MeGusta]

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

[nospor]

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

[MeGusta]

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.

[nospor]

Zwiększam za każdym kliknięciem data++;

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

Dodatkowo funkcja generate_min() tak jakby do starych zdjęć z pierwszego elementu tablicy dopisuje z drugiego elementu.

Bo nie zerujesz min_img_for

[MeGusta]

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.

[nospor]

Dobrze by bylo jakbys to wystawil online

[MeGusta]

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

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

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

[nospor]

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

[MeGusta]

Jasne, proszę bardzo.

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

[nospor]

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

[MeGusta]

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

[nospor]

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

[MeGusta]

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

[viking]

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.

[MeGusta]

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

[viking]

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

[MeGusta]

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ł.

[nospor]

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