Neregistrovaný Přihlásit Registrovat

Přidat otázku mezi oblíbenéZasílat nové odpovědi e-mailem JavaScript vybrat vsetky el. v poli okrem jedneho

Dobrý deň,

robim zadanie na vanilla javascript a mam problém z tým, že na stranku som si dal obrazky (nezaleží natom kolko ich je) a chcem že ak nad nejaký obrazok prídem kurzorom mysi tak sa do konzole vypisu vsetky ostatne img elementy okrem toho jedneho nad ktorym prave som.
Vsetky obrazky maju v css cursor: pointer; Tu je html kod:

<body>
	<div class="container">
		<img src="img/01.jpg" alt="">
		<img src="img/02.png" alt="">
		<img src="img/03.png" alt="">
		<img src="img/04.jpg" alt="">
		<img src="img/05.png" alt="">
		<img src="img/06.png" alt="">
	</div>
	<script type="text/javascript" src="js/main.js"></script>
</body>

a javascript kod (je zly), chcem pouzit funkciu filter no neviem co robim zle:

let images = document.querySelectorAll('img');
console.log(images); // dostaneme NodeList, musime ho prerobit na Array
let imagesArray = Array.from(images);
console.log(imagesArray); // dostaneme Array

imagesArray.forEach(function(image) {
    image.addEventListener('mouseover', function() {
        console.log(this); // this = img el.; vypise obrazok nad kt. sme kurzorom
        let x = imagesArray.filter(function(image) {
            return image !== this;
        });
        console.log(x); // tu by mi malo vypisat tie vsetky img, teda okrem toho jedneho nad ktorym som prave mysou
    });
});

v tom forEach loope som si prv chcel vypisat img nad ktorym som, potom som chcel odfiltrovat vsetko co neni this, teda ten konkretny img el. nad ktorym som. Neviem co je zle.

V JS som zaciatocnik (ucim sa to iba mesiac z internetu), takze ani neviem ci nato pouzivam spravnu funkciu. Musi to byt vylucne v js, ziadne ine kniznice (jquerry a pod.) ani frameworky. A img el. tiez nemaju mat ziadne id ani classy.

P.S. napisal som ze ide o zadanie, ale nieje to zadanie do skoly, takze nechcem aby ste za mna robili ulohu. JS sa ucim ako samouk z netu a zadanie som si nasiel na internete.

Předmět Autor Datum
Problém je v tom, že this v tom filteru už není to samé this jako v tom event listeneru. Vypiš si to…
Wikan 06.07.2020 17:43
 Wikan
Dakujem, takto som to upravil a vyzera ze to robi presne to co ma... imagesArray.forEach(function(i…
no.name 06.07.2020 18:18
 no.name
An arrow function expression is a syntactically compact alternative to a regular function expression… poslední
Wikan 06.07.2020 18:58
 Wikan

Dakujem, takto som to upravil a vyzera ze to robi presne to co ma...

imagesArray.forEach(function(image) {
    image.addEventListener('mouseover', function() {
        console.log(this); // this = img el.; vypise obrazok nad kt. sme kurzorom
        var that = this;
        let filterImage = imagesArray.filter(function(image) {
            return image !== that;
        });
        console.log(filterImage);
        for (let i = 0; i < filterImage.length; i++) {
            console.log(filterImage[i]);
        }
    });
});

iba let x som prepisal na filterImage a doplnil for cyklus. Lenze nechapem jednej veci... riadok var that = this; viem co to je a aj naco to tam pisem, no potom ked let filterImage =... prepisem na arrow funkciu tak to tam zazracne netreba, preco?

takze rovnako funguje aj toto bez var that = this;

imagesArray.forEach(function(image) {
    image.addEventListener('mouseover', function() {
        console.log(this); // this = img el.; vypise obrazok nad kt. sme kurzorom
        //var that = this;
        // let filterImage = imagesArray.filter(function(image) {
        //     return image !== that;
        // });
        let filterImage = imagesArray.filter(image => image !== this);
        console.log(filterImage);
        for (let i = 0; i < filterImage.length; i++) {
            console.log(filterImage[i]);
        }
    });
});

ja rad by som tomu pochopil, lebo ked tomu nepochopim tak to neskor zabudnem a cele je to potom tak trochu k nicomu. :-/

An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Protože právě v tom se to liší od normální funkce. Jinak ani to that nutně nepotřebuješ, stačí použít image a v tom filtru tu proměnnou pojmenovat jinak.

Zpět do poradny Odpovědět na původní otázku Nahoru