Określanie zdarzeń w pętli

Odpowiedz Nowy wątek
2011-08-17 13:30
0

Witam!
Mam taki kod:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Dokument przykładowy</title>
    <script type="text/javascript">
        const ILOSC = 5;
        window.onload = function() {
            for(var i=1; i<=ILOSC; i++) {
                document.getElementById("p"+i).onclick = function() {
                    alert("Kliknąłeś na akapit numer " + i);
                }
            }
        }
    </script>
</head>
 
<body>
    <div>
        <p id="p1">Akapit przykładowy 1</p>
        <p id="p2">Akapit przykładowy 2</p>
        <p id="p3">Akapit przykładowy 3</p>
        <p id="p4">Akapit przykładowy 4</p>
        <p id="p5">Akapit przykładowy 5</p>
    </div>
</body>
</html>
 

Dlaczego gdy kliknę na którykolwiek z akapitów, zawszę otrzymuję wiadomość: "Kliknąłeś na akapit numer 6"? Jak ustawić zdarzenia dla wielu elementów w pętli? Wiadomo, że mógłbym ustawić to tak:

    <script type="text/javascript">
        const ILOSC = 5;
        window.onload = function() {
            document.getElementById("p"+1).onclick = function() {
                alert("Kliknąłeś na akapit numer " + 1);
            }
            document.getElementById("p"+2).onclick = function() {
                alert("Kliknąłeś na akapit numer " + 2);
            }
            document.getElementById("p"+3).onclick = function() {
                alert("Kliknąłeś na akapit numer " + 3);
            }
            document.getElementById("p"+4).onclick = function() {
                alert("Kliknąłeś na akapit numer " + 4);
            }
            document.getElementById("p"+5).onclick = function() {
                alert("Kliknąłeś na akapit numer " + 5);
            }
        }
    </script>

Ale dla przykładowo 50 akapitów, byłoby z tym strasznie dużo roboty.
Pomoże ktoś?

Pozostało 580 znaków

2011-08-17 14:27
ŁF
0

bo zmienna i jest globalna w kontekście stworzonej metody, a metody obsługi zdarzeń wykonują się nie w momencie ich definiowania, tylko faktycznego kliknięcia. a że w momencie kliknięcia i ma wartość 6, to chyba oczywiste?
musisz przechowywać identyfikator w kontrolce (np. jako część id) albo sprawdzać, którym dzieckiem rodzica jest kliknięty element. możesz też utworzyć tablicę zawierającą powiązanie kontrolka - odpowiadający jej numer i w funkcji obsługi onclick sprawdzać tą tablicę.


edytowany 2x, ostatnio: ŁF, 2011-08-17 14:34

Pozostało 580 znaków

2011-08-17 15:17
bs

To klasyczny problem z domknięciami.

Wystarczy wydzielić ciało pętli for do osobnej funkcji, przyjmującej za parametr indeks pętli.

Najkrócej będzie użyć tzw. IIFE:

                window.onload = function() {
                        for(var i=1; i<=ILOSC; i++) {
                                (function(index) {
                                        document.getElementById("p"+index).onclick = function() {
                                                alert("Kliknąłeś na akapit numer " + index);
                                        };
                                }(i));
                        }
                }

(uwaga, pisane z palca, nie testowane -- zamysł na pewno dobry, ale może być jakaś literówa)

PS. Nawet standard ECMAScript 5 nie zawiera const (oprócz tego, że rezerwuje const jako słowo zastrzeżone -- na przyszłość). To rozszerzenie Mozilli. Co prawda nowsze wersje różnych przeglądarek to obsługują, ale często traktują const po prostu jako var. Natomiast IE włącznie z wersją 9 nie wspiera const w ogóle (i nie ma co psioczyć, skoro nie ma tego w standardzie ECMAScriptu).

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0