[JS, jQuery] AddEventListener i specyficzna funkcja anonimowa, pętle, problem z odpowiednim zdefiniowaniem funkcji jako paramentu |
[JS, jQuery] AddEventListener i specyficzna funkcja anonimowa, pętle, problem z odpowiednim zdefiniowaniem funkcji jako paramentu |
29.08.2017, 22:46:51
Post
#1
|
|
Grupa: Zarejestrowani Postów: 9 Pomógł: 0 Dołączył: 8.08.2017 Ostrzeżenie: (0%) |
Witam
Mam problem dość specyficzny (a może po prostu zbyt duże wymagania co do funkcjonalności i możliwości JS oraz jQuery). Oto mój fragment kodu, dalej opiszę co chciałbym osiągnąć po modyfikacji.
Po kolei. W HTMLu mam formularz. Składa się z kilku pytań, w każdym typem inputów jest "radio" i mają nazwy question1, question2 ... Pod pytaniami widnieje przycisk, dzięki któremu możemy przejść do kolejnego etapu (id kolejnych buttonów: next1, next2 ...) jednak wstępnie ukryty. Chce dodać opcję, że po kliknięciu na dowolny radio input z pytania i-tego, uruchamia on możliwość kliknięcia i-tego buttona przechodzącego do następnego pytania. Realizują to powyższe pętle: dla kolejnych "i" pytań zlicza ile jest inputów w każdym (zmienna rad jest tablicą tychże elementów) i do każdego dodaje uruchamianie funkcji (linia 6) na zdarzenie "onClick". Tu pojawia się problem... Co chciałbym osiągnąć: Podczas każdorazowego wykonywania się linii 5 do konkretnego radio buttona powinna być przypisana funkcja, która usuwa atrybut "disabled" z KONKRETNEGO przycisku next, czyli tego, którego id aktualnie znajduje sie w zmiennej "id" (powstaje ono w linii 3). Przykład: odpowiedzi z question1 uruchamiają przycisk next1, odpowiedzi z question2 uruchamiają przycisk next2 itd... Co się dzieje: Funkcja anonimowa opisana w linijce 6 rzeczywiście jest przypisana do odpowiednich radio inputów. Jednak nie zapisuje ona id takiego jakbym to chciał (czyli tego, który akurat jest przechowywany w zmiennej "id" w momencie wykonywania instrukcji) lecz zmienną. W efekcie, po przejściu całej pętli zewnętrznej (w moim przypadku gdy "i" już nie spełnia warunku i<=15) końcowa wartość zmiennej id jest "next15", przez co każdy wybór opcji w dowolnym pytaniu ujawnia przycisk zatwierdzający ostatnie pytanie. Przykład: odpowiedzi z question1 uruchamiają przycisk next15, odpowiedzi z question2 uruchamiają przycisk next15 itd... Wiem, że można by po prostu (choć jeszcze szczerze nie testowałem tego tak) na sztywno dopisać do każdego jednego z inputów w HTMLu atrybut onClick, jednak chciałem by kod był bardziej estetyczny, poza tym przy dużej liczbie pytań i możliwości odpowiedzi jest to pracochłonne i mało skalowalne w przyszłości. Wierzę, że odrobinę modyfikując to, co powyżej napisałem w JS można obejść ten problem. Moje pytanie brzmi: jak to zrobić? |
|
|
30.08.2017, 05:37:42
Post
#2
|
|
Grupa: Zarejestrowani Postów: 6 365 Pomógł: 1114 Dołączył: 30.08.2006 Ostrzeżenie: (0%) |
Dobrze by było, skoro korzystasz z jquery, żebyś nie mieszał czystego js.
https://jsfiddle.net/8mqn7zd2/ -------------------- |
|
|
30.08.2017, 07:19:48
Post
#3
|
|
Grupa: Zarejestrowani Postów: 9 Pomógł: 0 Dołączył: 8.08.2017 Ostrzeżenie: (0%) |
Świetnie, jestem pod wrażeniem tego właśnie szukałem Jeszcze jakbyś mi powiedział czy można w jakiś sposób zamiast "next" wybrać, którego z kolei przycisku ma dotyczyć akcja będę jeszcze bardziej wdzięczny (w kolejnych pytaniach jest jeszcze przycisk "wstecz" przed przyciskiem dalej).
|
|
|
30.08.2017, 07:38:13
Post
#4
|
|
Grupa: Zarejestrowani Postów: 6 365 Pomógł: 1114 Dołączył: 30.08.2006 Ostrzeżenie: (0%) |
Najlepiej by było przypiąć do wygenerowanego kodu atrybut data-id i po nim szukać. Albo poprawić ten button na type=submit i tego wyszukać.
-------------------- |
|
|
30.08.2017, 08:02:50
Post
#5
|
|
Grupa: Zarejestrowani Postów: 9 Pomógł: 0 Dołączył: 8.08.2017 Ostrzeżenie: (0%) |
a czy dodanie do wybranych buttonów jednej klasy stylu pomoże?
|
|
|
30.08.2017, 08:21:21
Post
#6
|
|
Grupa: Zarejestrowani Postów: 6 365 Pomógł: 1114 Dołączył: 30.08.2006 Ostrzeżenie: (0%) |
Tak.
-------------------- |
|
|
30.08.2017, 08:38:41
Post
#7
|
|
Grupa: Zarejestrowani Postów: 9 Pomógł: 0 Dołączył: 8.08.2017 Ostrzeżenie: (0%) |
A w jaki sposób to sformułować? zwykłe wpisanie next('.[nazwa klasy]') w miejsce tamtego kodu nie skutkuje.
|
|
|
30.08.2017, 08:44:34
Post
#8
|
|
Grupa: Zarejestrowani Postów: 6 365 Pomógł: 1114 Dołączył: 30.08.2006 Ostrzeżenie: (0%) |
https://jsfiddle.net/8mqn7zd2/1/
Poczytaj trochę o selektorach https://www.w3.org/TR/css3-selectors/#selectors Ten post edytował viking 30.08.2017, 08:48:49 -------------------- |
|
|
7.09.2017, 05:12:18
Post
#9
|
|
Grupa: Zarejestrowani Postów: 2 Pomógł: 0 Dołączył: 7.09.2017 Ostrzeżenie: (0%) |
|
|
|
7.09.2017, 05:24:49
Post
#10
|
|
Grupa: Zarejestrowani Postów: 6 365 Pomógł: 1114 Dołączył: 30.08.2006 Ostrzeżenie: (0%) |
Masz wyżej przykład z klasami. Jakiś inny problem?
-------------------- |
|
|
Wersja Lo-Fi | Aktualny czas: 27.04.2024 - 01:23 |