• 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

VPS Starter Arubacloud
+1 głos
396 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 (599,730 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 (251,210 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 (599,730 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 (251,210 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 (599,730 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 (599,730 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 (599,730 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,382 wizyt
pytanie zadane 4 lipca 2019 w JavaScript przez Ebay_05 Początkujący (400 p.)
0 głosów
2 odpowiedzi 567 wizyt
pytanie zadane 4 maja 2020 w Sieci komputerowe, internet przez Damian12345 Bywalec (2,940 p.)
0 głosów
1 odpowiedź 1,748 wizyt
pytanie zadane 12 lipca 2019 w HTML i CSS przez Hardwell Dyskutant (8,960 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...