• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Mapowanie funkcji w JavaScript

Object Storage Arubacloud
+1 głos
287 wizyt
pytanie zadane 21 czerwca 2021 w JavaScript przez xjafajx Użytkownik (740 p.)

Cześć,

Czy wie ktoś z Was może jak zmapować poniższą funkcję?

Ja nie mam zielonego pojęcia ponieważ nigdy nie używałem map().

Proszę o pomoc, poradę jak to zrobić.

Czytałem na ten temat na tej stronie jednak nadal nie rozumiem jak przekształcić poniższą funkcję w map() https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Global_Objects/Map

Dziękuję za wszelką okazaną pomoc ;)

    var planet0 = document.getElementById("0");
    var planet1 = document.getElementById("1");
    var planet2 = document.getElementById("2");
    var planet3 = document.getElementById("3");
    var planet4 = document.getElementById("4");
    var planet5 = document.getElementById("5");
    var planet6 = document.getElementById("6");
    var planet7 = document.getElementById("7");
    var x = 8;

    function moon(direction){

      if(direction == "next"){
        x-=1; 
      }else{
        x+=1;
      };

      if(x>=8){
        x=0;
      }else if(x<0){
        x=7;
      };
      switch (x) {
          case 0:
            planet0.style.visibility = "visible";
            planet1.style.visibility = "hidden";
            planet2.style.visibility = "hidden";
            planet3.style.visibility = "hidden";
            planet4.style.visibility = "hidden";
            planet5.style.visibility = "hidden";
            planet6.style.visibility = "hidden";
            planet7.style.visibility = "hidden";
            break;
          case 1:
            planet0.style.visibility = "hidden";
            planet1.style.visibility = "visible";
            planet2.style.visibility = "hidden";
            planet3.style.visibility = "hidden";
            planet4.style.visibility = "hidden";
            planet5.style.visibility = "hidden";
            planet6.style.visibility = "hidden";
            planet7.style.visibility = "hidden";
            break;
          case 2:
            planet0.style.visibility = "hidden";
            planet1.style.visibility = "hidden";
            planet2.style.visibility = "visible";
            planet3.style.visibility = "hidden";
            planet4.style.visibility = "hidden";
            planet5.style.visibility = "hidden";
            planet6.style.visibility = "hidden";
            planet7.style.visibility = "hidden";
          break;
          case 3:
            planet0.style.visibility = "hidden";
            planet1.style.visibility = "hidden";
            planet2.style.visibility = "hidden";
            planet3.style.visibility = "visible";
            planet4.style.visibility = "hidden";
            planet5.style.visibility = "hidden";
            planet6.style.visibility = "hidden";
            planet7.style.visibility = "hidden";
            break;
          case 4:
            planet0.style.visibility = "hidden";
            planet1.style.visibility = "hidden";
            planet2.style.visibility = "hidden";
            planet3.style.visibility = "hidden";
            planet4.style.visibility = "visible";
            planet5.style.visibility = "hidden";
            planet6.style.visibility = "hidden";
            planet7.style.visibility = "hidden";
            break;
          case 5:
            planet0.style.visibility = "hidden";
            planet1.style.visibility = "hidden";
            planet2.style.visibility = "hidden";
            planet3.style.visibility = "hidden";
            planet4.style.visibility = "hidden";
            planet5.style.visibility = "visible";
            planet6.style.visibility = "hidden";
            planet7.style.visibility = "hidden";
            break;
          case 6:
            planet0.style.visibility = "hidden";
            planet1.style.visibility = "hidden";
            planet2.style.visibility = "hidden";
            planet3.style.visibility = "hidden";
            planet4.style.visibility = "hidden";
            planet5.style.visibility = "hidden";
            planet6.style.visibility = "visible";
            planet7.style.visibility = "hidden";
            break;
          case 7:
            planet0.style.visibility = "hidden";
            planet1.style.visibility = "hidden";
            planet2.style.visibility = "hidden";
            planet3.style.visibility = "hidden";
            planet4.style.visibility = "hidden";
            planet5.style.visibility = "hidden";
            planet6.style.visibility = "hidden";
            planet7.style.visibility = "visible";
            break;
          default:
            planet0.style.visibility = "visible";
            planet1.style.visibility = "hidden";
            planet2.style.visibility = "hidden";
            planet3.style.visibility = "hidden";
            planet4.style.visibility = "hidden";
            planet5.style.visibility = "hidden";
            planet6.style.visibility = "hidden";
            planet7.style.visibility = "hidden";

      };

    };

 

1 odpowiedź

+3 głosów
odpowiedź 21 czerwca 2021 przez Comandeer Guru (602,380 p.)

Tutaj map nie ma zastosowania, bo nie tworzysz żadnej tablicy. Ty chcesz po prostu wykonać akcję dla każdego elementu tablicy – a więc bardziej forEach. Tylko że żadnej tablicy jak na razie nie masz.

Ogólnie to zamiast tych zmiennych planetX zrobiłbym tablicę (czy też kolekcję zachowującą się jak tablica) planets przy pomocy document.querySelectorAll. I wówczas nie posługiwał się id poszczególnych planet a po prostu wspólną klasą, np. .planet. Mając taką kolekcję, możesz już przejechać ją forEach i dla każdego elementu sprawdzić, czy zmienna x jest równa indeksowi tej planety. Jeśli tak, pokazać ją, jeśli nie, ukryć.

Coś typu:

planets.forEach( ( planet, i ) => {
	if ( i === x ) {
		planet.style.visibility = 'visible';
	} else {
		planet.style.visibility = 'hidden';
	}
} );

 

komentarz 21 czerwca 2021 przez xjafajx Użytkownik (740 p.)
Dziękuję za pomoc.
komentarz 21 czerwca 2021 przez xjafajx Użytkownik (740 p.)
edycja 21 czerwca 2021 przez xjafajx

A jeszcze jedno pytanie...

Animacja zaczyna działać dopiero po kliknięciu w przycisk next natomiast jak kliknę w prev nie pokazuje się na aktualnym ale na poprzednim.

Po odpaleniu strony index.html:

Po kliknięciu w next:

Po kliknięciu w prev:

Co muszę zmienić w kodzie aby funkcjonował poprawnie?

Czyli po odpaleniu strony od razu na środkowym elemencie uruchamia się animacja.

Po kliknięciu w next przestaje działać na aktualnym ale zaczyna funkcjonować na następnym.

Tak samo dla prev tylko że w lewą stronę.

komentarz 21 czerwca 2021 przez Comandeer Guru (602,380 p.)
Tak prawdę mówiąc trudno coś powiedzieć, nie widząc, jak ten kod działa na żywo – zwłaszcza, że to tylko jego wycinek.
komentarz 21 czerwca 2021 przez xjafajx Użytkownik (740 p.)
Ok.

Maiłem z czymś innym problem i zadałem pytanie na stackoverflow bo myślałem że dostanę tam szybciej odpowiedź jednak to tutaj otrzymałem poprawną i szybką odpowiedź.

https://stackoverflow.com/questions/68041721/responsive-menu-in-javascript?fbclid=IwAR1KHo6g81lgYrezr_MtcFHNCyPnt8ybFJBbP8Dnsl6Qht_9hhAvad4AncE

Kod jeszcze przed modyfikacją. Wystarczy uruchomić go za pomocą przycisku Run Code Snippet. Polecam uruchomić na fullpage
komentarz 22 czerwca 2021 przez xjafajx Użytkownik (740 p.)
Czy ktoś potrafi mi doradzić/pomóc co mam zrobić aby rozwiązać dany problem opisany powyżej?

Z góry dziękuję za wszelką pomoc.
komentarz 22 czerwca 2021 przez Comandeer Guru (602,380 p.)
Najprawdopodobniej więcej osób udzieli odpowiedzi, jeśli przeniesiesz ten problem do osobnego wątku. Bo tutaj o wiele mniej osób zauważy, że jest wgl jakieś drugie pytanie.

Podobne pytania

0 głosów
1 odpowiedź 130 wizyt
pytanie zadane 20 lutego 2018 w JavaScript przez ShiroUmizake Nałogowiec (46,300 p.)
0 głosów
1 odpowiedź 462 wizyt
pytanie zadane 25 marca 2021 w Inne języki przez karolina_web Nowicjusz (140 p.)
0 głosów
0 odpowiedzi 129 wizyt

92,661 zapytań

141,554 odpowiedzi

319,995 komentarzy

62,028 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...