Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS, jQuery] AddEventListener i specyficzna funkcja anonimowa, pętle
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
pavon
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.
  1. <fieldset class="class" id='step1'>
  2. <legend>Co się wydarzyło z lotem?</legend>
  3. <p>
  4. <input type='radio' name='question1' value=1 />opóźniony<br>
  5. <input type='radio' name='question1' value=2 />odwołany<br>
  6. <input type='radio' name='question1' value=3 />odmówiono wstępu na pokład
  7. </p>
  8. <button type='button' id='next1' disabled>Dalej</button>

[JAVASCRIPT] pobierz, plaintext
  1. for (i = 1; i <= 15; i++){
  2. rad = document.getElementsByName('question'+i);
  3. id = '#next' + i;
  4. for (j = 0; j < rad.length; ++j){
  5. rad[j].addEventListener('click', function(){
  6. $(id).removeAttr('disabled');
  7. });
  8. }
  9. }
[JAVASCRIPT] pobierz, plaintext

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ć? wink.gif
viking
Dobrze by było, skoro korzystasz z jquery, żebyś nie mieszał czystego js.
https://jsfiddle.net/8mqn7zd2/
pavon
Świetnie, jestem pod wrażeniem tego właśnie szukałem biggrin.gif 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).
viking
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ć.
pavon
a czy dodanie do wybranych buttonów jednej klasy stylu pomoże?
viking
Tak.
pavon
A w jaki sposób to sformułować? zwykłe wpisanie next('.[nazwa klasy]') w miejsce tamtego kodu nie skutkuje.
viking
https://jsfiddle.net/8mqn7zd2/1/

Poczytaj trochę o selektorach https://www.w3.org/TR/css3-selectors/#selectors
jason8
w jaki sposób to sformułować?


--------------------
javascript obfuscator online | 192.168.0.1 router
viking
Masz wyżej przykład z klasami. Jakiś inny problem?
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.
Invision Power Board © 2001-2024 Invision Power Services, Inc.