[damiano_polishiano]

Mirki, zacząłem uczyć się #javascript
Mam 4 elementy menu i 4 sekcje.
Mam krótki kod w #jquery do skrolowania do sekcji po naciśnięciu menu :

var menu = $("a[href^='#']");

menu.click(function() {

event.preventDefault();

target = $(this).attr('href');

$('html, body').animate({scrollTop: $(target).offset().top}, 1000);

});

Chciałbym przepisać go na czysty #js .
W/w $(this) rozumiem jako obiekt, na rzecz którego została wywołana funkcja, tzn menu (??).
Dlatego this zamieniłem na menu=[i]:

var menu = document.querySelectorAll("a[href^='#']");

for (i = 0; i menu[i].addEventListener('click', function() {

event.preventDefault();

var target = menu[i].attr('href');

//poniżej wstępnie jquery

$('html, body').animate({

scrollTop: $(target).offset().top

}, 1000);

});

}

Wyrzuca mi błąd:

Uncaught TypeError: Cannot read property 'attr' of undefined

Jeśli zostaje $(this) to działa.
Możecie mi pomóc zrozumieć czym jest w końcu te $(this), tzn co powinienem zamiast niego wpisać?
#kiciochpyta

[t.....l]

@damiano_polishiano: .attr() to metoda obiektu jQuery, więc nie wywołasz jej na this, bo this jej nie implementuje.

Weźmy sobie na przykład taki kod:

div = document.getElementById('test');
test.addEventListener('click',

[t.....l]

@damiano_polishiano: https://jsfiddle.net/d0kyqx81/1/

[damiano_polishiano]

.attr() to metoda obiektu jQuery, więc nie wywołasz jej na this

@tomash-pl: teraz to już mi namieszałeś kompletnie ;/

$(this).attr('class', 'red')

okej, czyli w moim wypadku

[t.....l]

@damiano_polishiano: https://jsfiddle.net/d0kyqx81/2/ zerknij na konsolę po kliknięciu w diva.

var target = menu[i].getAttribute('href');
console.log(target);

i zobacz, co Ci to zwraca ;)

[t.....l]

scrollTop: $(target).offset().top

@damiano_polishiano: a tu nie powinno być $(menu[i]).offset().top czasem?

[damiano_polishiano]

@tomash-pl:
nic...
tzn błąd w linii z var target:
Uncaught TypeError: Cannot read property 'getAttribute' of undefined

dobra, to od początku, bo może źle

[damiano_polishiano]

a tu nie powinno być $(menu[i]).offset().top czasem?

@tomash-pl: nie, końcówka działa (mimo, że to jQ, które też chcę wywalić docelowo)
wywala się w linii var target
jak dam $(menu[i]).offset().top to też wywali ten sam błąd co powyżej

[t.....l]

@damiano_polishiano: ok, już mam błąd... https://jsfiddle.net/pn6aygs3/

jak robisz menu[i].addEventListener() to tu się zmienia scope, w związku z tym w srodku funkcji nie używasz już menu[i], tylko właśnie this :P

[damiano_polishiano]

@tomash-pl: nie ma opcji zastąpienia thisa?
znajomy robiący we front-endzie wczoraj mi powiedział, żeby tego nie używać (używać jak najmniej).

[t.....l]

@damiano_polishiano: co za bzdury Ci nagadał :D

[laki1]

A po co js do tego? :D

[t.....l]

@laki1: od razu niech n--------a serwisy w angjularze albo reakcie, nie? Przecież głupie wprawki są nikomu niepotrzebne.

[damiano_polishiano]

@tomash-pl: ja to zrozumiałem w ten sposób, że mogłem po prostu zakotwiczyć AjDikiem w htmlu i koniec :|