[JS, jQuery] AddEventListener i specyficzna funkcja anonimowa, pętle, problem z odpowiednim zdefiniowaniem funkcji jako paramentu Opcje

[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.

[HTML] pobierz, plaintext 
<fieldset class="class" id='step1'>
		<legend>Co się wydarzyło z lotem?</legend>
		  <p>
		  <input type='radio' name='question1' value=1 />opóźniony<br>
		  <input type='radio' name='question1' value=2 />odwołany<br>
		  <input type='radio' name='question1' value=3 />odmówiono wstępu na pokład
		  </p>
		  <button type='button' id='next1' disabled>Dalej</button>
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
for (i = 1; i <= 15; i++){
        rad = document.getElementsByName('question'+i);
        id = '#next' + i;
        for (j = 0; j < rad.length; ++j){
                rad[j].addEventListener('click', function(){
                   $(id).removeAttr('disabled');
                });        
            }
         }
[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ć?

[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 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

Ten post edytował viking 30.08.2017, 08:48:49

[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?