• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Zmiana koloru tła diva w zależności od radio buttona

Aruba Cloud - Virtual Private Server VPS
+1 głos
819 wizyt
pytanie zadane 8 lipca 2020 w JavaScript przez RysiekB Nowicjusz (130 p.)
Witam,

jak rozwiązać taki problem.

Mam formularz w którym jest wiele pytań.

W divie o klasie "pytanie" jest treść pytania

W divie o klasie "odpowiedź" jest radio button z trzema wartościami OK, NOK, NA

Chciałbym aby jeżeli wybierzemy OK pytanie było wyświetlane na czerwonym tle, NOK na zielonym.

Jaki jest schemat rozwiązania? Chciałbym aby kolory zmieniały się tylko w tym pytaniu w którym zaznaczyliśmy OK, NOK i nie miało to wpływu na inne pytania.
komentarz 8 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)
edycja 8 lipca 2020 przez _Pita_
Mylę, że gdyby div z pytaniem miał jakieś konkretne ID, sprawa byłaby prostsza, możesz je nadać/podać?

No i najważniejsze, jakie ID mają radio?
komentarz 8 lipca 2020 przez RysiekB Nowicjusz (130 p.)
<div class="pytanie2" id="LPA11">1.1 ????????????????????????????????</div>
<div class="odpowiedz2">
    <input type="radio" name="LPA11" value="NA" required checked> N/A<br />
    <input type="radio" name="LPA11" value="OK" required> OK <br />
    <input type="radio" name="LPA11" value="NOK" required> NOK <br />
</div>    

... i dalsze pytania mają kolejne ID LPA12,... LPA13 itd.
komentarz 8 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)
Ok, mam pomysł jak to rozwiązać, jednak potrzebowałbym jeszcze,  aby każdy button radio miał inne ID, dałoby się zrobić?

P.S

I jakbyś mógł wstawić kod w odpowiedni sposób (funkcja "code")
komentarz 8 lipca 2020 przez RysiekB Nowicjusz (130 p.)
Czyli coś takiego?

<div class="odpowiedz2">
    <input type="radio" name="LPA11" value="NA" id="NA" required checked> N/A<br />
    <input type="radio" name="LPA11" value="OK" id="OK" required> OK <br />
    <input type="radio" name="LPA11" value="NOK" id="NOK" required> NOK <br />
</div>

3 odpowiedzi

+2 głosów
odpowiedź 8 lipca 2020 przez Comandeer Guru (606,480 p.)

Ja to widzę w taki sposób: https://jsfiddle.net/Comandeer/9xhvkeoa/

Dodatkowe [id] nie są potrzebne, dzięki wykorzystaniu delegacji zdarzeń.

Całość opiera się na dodawaniu dodatkowych klas (.question_ok, .question_nok.question_na) w chwili zmiany zaznaczenia inputów znajdujących się wewnątrz diva z klasą .question (oczywiście nazwy klas można podmienić). Dodawane klasy są konstruowane na zasadzie question_ + [value] zaznaczonego inputa.

Tym sposobem ten sam kod spokojnie obsłuży wszystkie inputy na stronie.

komentarz 8 lipca 2020 przez RysiekB Nowicjusz (130 p.)
Dzięki. Właśnie o to mi chodziło ale niestety dopiero zaczynam i nie wiedziałem jak do tego podejść. Jeszcze raz dzięki za podpowiedź.
komentarz 9 lipca 2020 przez VBService Ekspert (256,600 p.)

@Comandeer, Czy ten zapis jest prawidłowy? Bo działa. https://jsfiddle.net/a0ukexc8/1/

document.addEventListener( 'input', ( { target } ) => {
  const div =  target.closest( '.question' );
  div.className = `question question_${ target.value }`;
} );

 

komentarz 9 lipca 2020 przez Comandeer Guru (606,480 p.)

Jest, ale ma jedną wadę, której nie posiada korzystanie z classList: nadpisuje wszystkie klasy. Bezpieczniej jest tylko dodawać i usuwać klasy, nad którymi mamy pełną kontrolę.

komentarz 9 lipca 2020 przez VBService Ekspert (256,600 p.)
edycja 9 lipca 2020 przez VBService

A taki zapis? https://jsfiddle.net/yh6emnsa/

document.addEventListener( 'input', ( { target } ) => {
  const div =  target.closest( '.question' );
  const value = `question_${ target.value }`;
  div.className = div.className.replace(new RegExp(`(?:^|\\s)${div.dataset.lastRadio}(?:\\s|$)`), '') + ' ' + value;
  div.dataset.lastRadio = value;
} );

[EDIT]

Moim zdaniem ten zapis powyżej ma zaletę taką, że można dodawać kolejne <input radio> bez potrzeby edytowania tej linii ( https://jsfiddle.net/37Ljqytb/ )

...

	[ 
		'ok',
		'nok',
		'na'
	].forEach( ( possibleState ) => {

 

komentarz 9 lipca 2020 przez Comandeer Guru (606,480 p.)

No można się tak bawić – tylko po co? Po to właśnie powstało classList, żeby nie robić takich rzeczy.

0 głosów
odpowiedź 8 lipca 2020 przez lapa19904 Stary wyjadacz (11,560 p.)

Wstaw kod bo nie wiem do czego się odnieść. Musisz sprawdzać wartość radio button-a po każdej zmianie/kliku i na podstawie wartość nadawać kolor, dodawać klasę do konkretnego div-a.

To może Ci trochę pomóc: 

https://stackoverflow.com/questions/9618504/how-to-get-the-selected-radio-button-s-value

komentarz 8 lipca 2020 przez RysiekB Nowicjusz (130 p.)
Ok. Przejrzę tego linka. Dzięki.
0 głosów
odpowiedź 8 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)
edycja 8 lipca 2020 przez _Pita_

Napisałem coś takiego:

(Z użyciem jQuery)

<body>

<div id="LPA11">1.1 ????????????????????????????????</div>
<div class="odpowiedz2">
    <input type="radio" name="LPA11" value="NA" required checked> N/A<br />
    <input type="radio" name="LPA11" value="OK" required> OK <br />
    <input type="radio" name="LPA11" value="NOK" required> NOK <br />
</div>
<script>
    function green() {
$("#LPA11").removeClass("Red")
$("#LPA11").addClass("Green")
    }
function red() {
$("#LPA11").removeClass("Green")
$("#LPA11").addClass("Red")
}


</script>

<style>
.Green{background-color: green}
.Red{background-color: red}
</style>

</body>

Teraz wystarczy, że w zależności od wybranego buttona, wykonasz funkcję red() albo green()

komentarz 8 lipca 2020 przez Comandeer Guru (606,480 p.)
Wypadałoby przynajmniej poinformować, że używasz jQuery.

Dodatkowo Twój kod łamie podstawową, wieloletnią konwencję nazewniczą w JavaScripcie: nazwa zaczynająca się dużą literą jest zarezerwowana dla konstruktora.

Pomijam fakt, że pisanie osobnej funkcji dla każdego pytania jest skrajnie nieoptymalne.
komentarz 8 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)
Racja, wyciąłem ze swojego kodu head w którym dodawałem jQ (poprawione)

Nazwy też już chyba są już ok,

Co do ostatniego, to dałoby się to zrobić pętlą, ale najłatwiej byłoby to zrobić znając maksymalną ilość pytań, a tej informacji nie posiadam. (Mam na myśli włożenie zawartości tych funkcji do ifa, sprawdzającego zaznaczenie przycisku radio, a całość włożyć do pętli, która wykonywałaby ify dla każdego pytania)
komentarz 8 lipca 2020 przez Comandeer Guru (606,480 p.)

najłatwiej byłoby to zrobić znając maksymalną ilość pytań

Najłatwiej to byłoby to zrobić na delegacji zdarzeń, bez jakiegokolwiek odwoływania się do [id] elementów, bo jest to całkowicie niepotrzebne. 

Podobne pytania

0 głosów
0 odpowiedzi 2,944 wizyt
pytanie zadane 4 lipca 2019 w JavaScript przez Ebay_05 Początkujący (400 p.)
0 głosów
2 odpowiedzi 982 wizyt
pytanie zadane 4 maja 2020 w Sieci komputerowe, internet przez Damian12345 Bywalec (2,940 p.)
0 głosów
1 odpowiedź 2,256 wizyt
pytanie zadane 12 lipca 2019 w HTML i CSS przez Hardwell Dyskutant (8,980 p.)

93,324 zapytań

142,323 odpowiedzi

322,390 komentarzy

62,654 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...