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

Jak zapisać pętlę

VPS Starter Arubacloud
+1 głos
224 wizyt
pytanie zadane 29 sierpnia 2021 w JavaScript przez ShockWave Bywalec (2,350 p.)

Cześć, mam pytanie jak zapisać pętlę która będzie wykonywała się od 4 do 0;

Obecnie mam taki zapis

for (let i = 4 ; i > photoFrame.length; i--)
        {
           // do
        }

Mam tablicę która ma indeksy od 0 do 4

2 odpowiedzi

+2 głosów
odpowiedź 29 sierpnia 2021 przez Comandeer Guru (599,730 p.)
wybrane 29 sierpnia 2021 przez ShockWave
 
Najlepsza

Jak chcesz pętlę od 0 do końca tablicy, to robisz zaczynając z i równym 0 i kończysz, gdy i jest na ostatnim elemencie tablicy (czyli length - 1). Tutaj musisz zrobić odwrotnie. Ustawić i na length - 1 i wykonywać tak długo, aż i nie dojdzie do 0 (innymi słowy: i będzie większe lub równe 0).

komentarz 29 sierpnia 2021 przez ShockWave Bywalec (2,350 p.)
a gdybym chciał żeby ta pętla np wykonała się raz czyli zrobiła jakieś rzeczy dla obiektu o indeksie 4, później przy następnym kliknięciu wykonała się tylko dla indeksu 3, i tak dalej w nieskończoność. To czego najlepiej użyć i jak to zapisać? Ogólnie chodzi o slider, i przy kliknięciu na strzałkę w górę, chcę aby coś zrobić dla elementu o indeksie 4, potem przy kolejnym kliknięciu dla elementu o indeksie 3 i tak w kółko.
komentarz 29 sierpnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Podstaw zmienną (lub argument funkcji) w miejsce i. Wtedy wywołując funkcję z parametrem liczbowym (można też zrobić fallback na jakąś domyślną wartość) będziesz określać z zewnątrz od jakiej liczby pętla ma zaczynać iteracje.

komentarz 29 sierpnia 2021 przez ShockWave Bywalec (2,350 p.)

Nie bardzo wiem jak to zrobić :/

for(let i = photoFrame.length - 1; i >=0; i--)
        {
            photoFrame[i].style.border = "none";
            photoFrame[i].appendChild(imgRedLine[0]);
            photoFrame[i].style.display = "flex";
            photoFrame[i].style.flexDirection = "column";
            imgRedLine[0].style.marginBottom = "-25px"
        }

Tutaj wklejam kod

komentarz 29 sierpnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Czym jest zmienna photoFrame? W tym przypadku to powinna być kolekcja (tablica) elementów DOM, podobnie imgRedLine.


Natomiast

gdybym chciał żeby ta pętla np wykonała się raz czyli zrobiła jakieś rzeczy dla obiektu o indeksie 4, później przy następnym kliknięciu wykonała się tylko dla indeksu 3, i tak dalej w nieskończoność

chyba Cię źle zrozumiałem. Jeśli potrzebujesz coś zrobić raz, np. dla elementu o konkretnym indeksie tablicy, to nie potrzebujesz w ogóle pętli. Wystarczy funkcja, która jako parametr otrzyma tenże indeks tablicy i wykona coś na elemencie pod tym indeksem.

function manipulateNthElement(index) {
    const nthElement = photoFrame[index];

    nthElement.style.border = "none";
    nthElement.appendChild(imgRedLine[0]);
    nthElement.style.display = "flex";
    nthElement.style.flexDirection = "column";
}

manipulateNthElement(3);
manipulateNthElement(7);

Możesz do takiej funkcji przekazywać też w parametrze samą kolekcję, żeby funkcja nie opierała się na zmiennej z wyższego scope. Dobrze by też było, przed wykonaniem operacji na tym elemencie, zrobić jakieś sprawdzenie, czy jest on w ogóle obecny w tej kolekcji pod wskazanym indeksem. Można też przekazać do takiej funkcji docelowy element od razu, zamiast indeksu (i opcjonalnej kolekcji).

komentarz 29 sierpnia 2021 przez ShockWave Bywalec (2,350 p.)
Działa, tylko dałoby radę zapisać to "manipulateNthElement(i);" tylko raz?

gdzie i zaczynałoby się od 4 i szło po tablicy od 4 do 0 i tak w kółko?

DO tego będzie potrzebna pętla?
komentarz 29 sierpnia 2021 przez ShockWave Bywalec (2,350 p.)
arrowUp.addEventListener("click", (e) =>{

        firstPhotoFrame[0].style.border = "2px solid #EBEBEB";
        firstPhotoFrame[0].style.width = "82px";
        firstPhotoFrame[0].style.height = "82px";
        firstPhotoFrame[0].style.display = "flex";
        firstPhotoFrame[0].style.alignItems = "center";
        firstPhotoFrame[0].style.justifyContent = "center";
        firstPhotoFrame[0].style.margin = "5px 0px"

        function manipulateNthElement(index) {
            const nthElement = photoFrame[index];
         
            nthElement.style.border = "none";
            nthElement.appendChild(imgRedLine[0]);
            nthElement.style.display = "flex";
            nthElement.style.flexDirection = "column";
        }
         
        manipulateNthElement(4);
        manipulateNthElement(3);
        manipulateNthElement(2);
        manipulateNthElement(1);
        manipulateNthElement(0);
    });

Problem tutaj polega na tym, że po kliknięciu to wszystko od razu wykona się dla każdego elementu, a chciałbym aby to wykonywało się po kolei.

komentarz 29 sierpnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Jeśli każde kliknięcie w strzałkę slajdera ma zmieniać kolejny jeden element z tablicy, to zadeklaruj sobie zmienną, w postaci licznika, powyżej event listenera i na każde kliknięcie inkrementuj/dekrementuj go, a następnie wywołaj funkcję manipulateNthElement z tym licznikiem. Możesz mieć np. dwa przyciski na slajderze: góra/przód i dół/tył, a ich event listenery będą odpowiednio inkrementować i dekrementować ten licznik, dzięki czemu na każde kliknięcie zmieni się wybrany element z listy.

komentarz 29 sierpnia 2021 przez ShockWave Bywalec (2,350 p.)
ta zmienna musi być tablicą z wartościami od 0 do 4? Bo spróbowałem teraz ustawić zmienna od razu na 4 i po kliknięciu w strzałkę do góry dekrementuje ją, ale gdy dochodzi do zera to przestaje działać.
komentarz 29 sierpnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Która zmienna? Przeanalizuj sobie ten przykład i spróbuj użyć podobnego sposobu w swoim kodzie.

–1 głos
odpowiedź 29 sierpnia 2021 przez Author[] Gaduła (3,130 p.)
edycja 18 września 2021 przez Author[]

To bardzo proste: 

for(let i=photoFrame.length-1; i>=0; i--){}

 

3
komentarz 29 sierpnia 2021 przez Comandeer Guru (599,730 p.)
No nie do końca, bo element o indeksie równym długości tablicy nie istnieje ;)
komentarz 18 września 2021 przez Author[] Gaduła (3,130 p.)
Faktycznie, masz rację. Zapomniałem o tym, zmienię odpowiedź aby nie mylić innych.

Podobne pytania

0 głosów
3 odpowiedzi 343 wizyt
pytanie zadane 11 września 2022 w JavaScript przez Doge Gaduła (3,320 p.)
0 głosów
1 odpowiedź 273 wizyt
pytanie zadane 28 stycznia 2023 w JavaScript przez Verone Nowicjusz (120 p.)
+1 głos
4 odpowiedzi 165 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 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!

...