Mapowanie funkcji w JavaScript

Question

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";

      };

    };

 

Answer 1

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';
	}
} );

 

Comments

Dziękuję za pomoc.

---

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

---

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.

---

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

---

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.

---

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.