Forum PHP.pl > [JavaScript]Event click w pętli

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]Event click w pętli

MateuszS

16.09.2015, 13:01:28

Hej,

Mam problem z eventem click na buttonie, ktory jest w pętli. Tu fragment kodu (coffee script)

[JAVASCRIPT] pobierz, plaintext 
                    for index of shelfs
                        shelf = shelfs[index]
                        content = 'Empty shelf '+ shelf.getId()
                        $(@).append('<input type="button" style="width: 100%; height: 40px" class="input_button" value="'+content+'" /><br />')
                        button = $(@).find('input').last()
 
                        parent = $(@)
                        button.click -> 
                            console.log(button.val())
[JAVASCRIPT] pobierz, plaintext

Za kazdym razem wyswietla mi value ostatniego buttona zamiast kolejnych. Wiecie jak to obejsc?

Pozdrawiam

nospor

16.09.2015, 13:05:44

console.log(button.val())
Poniewaz wartosc button jest nadpisywana w petli i na jej koncu zawiera wartosc ostatniego elementu ktory byl do niej przypisany

Comandeer

16.09.2015, 13:08:00

A do jakiego to kodu jest kompilowane? Bo wygląda tak, jakby button był wyciągnięty poza pętlę (CS to lubi) i tym samym każda iteracja ją nadpisuje. W czystym JS po prostu zawartość pętli otacza się w IIFE. W nowym JS (ES6) po prostu wystarczyłoby zadeklarować button przez słowo kluczowe let, a nie var wewnątrz pętli.

MateuszS

16.09.2015, 13:13:31

Cytat(nospor @ 16.09.2015, 14:05:44 )

console.log(button.val())
Poniewaz wartosc button jest nadpisywana w petli i na jej koncu zawiera wartosc ostatniego elementu ktory byl do niej przypisany

Tak, tego się domyśliłem, ale nie jest to u mnie porządane zachowanie

@Comandeer

[JAVASCRIPT] pobierz, plaintext 
for (index in shelfs) {
              shelf = shelfs[index];
              content = 'Empty shelf ' + shelf.getId();
 
              $(this).append('<input type="button" style="width: 100%; height: 40px" class="input_button" value="' + content + '" /><br />');
              button = $(this).find('input').last();
              parent = $(this);
              results.push(button.click(function() {
                console.log(button.val());
 
             }));
[JAVASCRIPT] pobierz, plaintext

nospor

16.09.2015, 13:22:22

Czemu nei zrobisz poprostu:

console.log(this.value);
? Przeciez pod this masz aktualny element

MateuszS

16.09.2015, 13:27:57

Cytat(nospor @ 16.09.2015, 14:22:22 )

Czemu nei zrobisz poprostu:

console.log(this.value);
? Przeciez pod this masz aktualny element

Ajj moja pomyłka, miał być console.log(shelf.getId()). Z buttonem owszem this działa ale shelf jest nadpisywany.

nospor

16.09.2015, 13:33:42

shelf = shelfs[index];
To jest zmienna globalna i poraz kolejny nadpisywana.

sprobuj:
var shelf = shelfs[index]; //zmienna lokalna

MateuszS

16.09.2015, 13:37:42

Próbowałem zmienić to w .js i to też nie pomogło:

[JAVASCRIPT] pobierz, plaintext 
for (index in shelfs) {
              var shelf = shelfs[index];
              var content = 'Empty shelf ' + shelf.getId();
              $(this).append('<input type="button" style="width: 100%; height: 40px" class="input_button" value="' + content + '" /><br />');
              var button = $(this).find('input').last();
              var parent = $(this);
              results.push(button.click(function() {
                console.log(console.log(shelf.getId());
[JAVASCRIPT] pobierz, plaintext

Niestety coffee script wyrzuca mi zawsze deklaracje zmiennych "piętro" wyżej i nie bardzo wiem czy da się to jakoś przestawić. Ale tak czy siak niestety nie pomaga.

//edit, moze daloby sie jakos przez parametr clicka przeslac tego shelfa? Bo pewnie onClick w inpucie by przeszlo ale nie jest to eleganckie, moze jakis trigger wywolam z parametrem?

nospor

16.09.2015, 13:40:13

chcesz tylko dobrac sie do tego ID? To dopisuj go jako atrybuj dla inputa i pobieraj na podobnej zasadzie co this.value. I po sprawie

Comandeer

16.09.2015, 13:41:05

Kod

for (index in shelfs) {
    (function(shelf)
    {
        var content = 'Empty shelf ' + shelf.getId();
        $(this).append('<input type="button" style="width: 100%; height: 40px" class="input_button" value="' + content + '" /><br />');
        var button = $(this).find('input').last();
        var parent = $(this);
        button.click(function() {
            console.log(console.log(shelf.getId());
        });
    }(shelfs[index]));
}

MateuszS

16.09.2015, 13:42:57

Cytat(nospor @ 16.09.2015, 14:40:13 )

chcesz tylko dobrac sie do tego ID? To dopisuj go jako atrybuj dla inputa i pobieraj na podobnej zasadzie co this.value. I po sprawie

ten shelf jest obiektem, czasami bede potrzebowal rzeczy z "wyzej". Obiektu nie zapisze do atrybuta bez jakiejs serializacji a to chyba nie jest dobre rozwiazanie. Fajnie byloby tego clicka wywolac jakos z parametrem cos jak w onClick

Cytat(Comandeer @ 16.09.2015, 14:41:05 )

Kod

to kod JSowy, jak to zapisac w coffee? To zadziala?

nospor

16.09.2015, 13:43:12

Cytat

ten shelf jest obiektem, czasami bede potrzebowal rzeczy z "wyzej"

To zapisuj index tego obiektu z tablicy. I po sprawie. Mnozysz problemy

Comandeer

16.09.2015, 13:47:54

https://realguess.net/2014/03/03/immediatel...n-coffeescript/ → tak by to wyglądało w CS.

MateuszS

16.09.2015, 14:01:13

Cytat(Comandeer @ 16.09.2015, 14:47:54 )

https://realguess.net/2014/03/03/immediatel...n-coffeescript/ → tak by to wyglądało w CS.

No wlasnie nie za dobrze mi kompiluje. Początek się zgadza

(shelf) ->

natomiast mam problem z przekazaniem argumentu. Gdy wklepię kod na sztywno do JS to wywala mi

Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined

Comandeer

16.09.2015, 19:52:50

Prawdę mówiąc nie bardzo wiem czego ten błąd dotyczy… Czyżby chodziło o $.fn.append?

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.