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

select i ukrywanie inputów

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
+1 głos
682 wizyt
pytanie zadane 5 marca 2016 w JavaScript przez BlvckFox Gaduła (4,240 p.)
Witam, to jest kod w którym widać o co mi chodzi: http://codepen.io/anon/pen/grajxZ
A tutaj jeszcze dopiszę: Więc tak, co muszę zrobić, żeby na sam start pokazywały się tylko 2 input text, a po zaznaczeniu select np. 4 to 4 input text (bez żadnego buttona submit etc. [js]).

3 odpowiedzi

+2 głosów
odpowiedź 5 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)
komentarz 5 marca 2016 przez Comandeer Guru (605,800 p.)

Krzycho92 nie polecaj !important!

@BlvckFox hm… spróbuj jeszcze raz. Głównie rozchodzi się o to, że selektor typu .klasa element jest ważniejszy niż .klasa, stąd nadpisuje style z .hide

komentarz 5 marca 2016 przez BlvckFox Gaduła (4,240 p.)

Krzycho92 działa, dlaczego !important jest złym rozwiązaniem?

komentarz 5 marca 2016 przez Comandeer Guru (605,800 p.)

Bo niczym się tego nie da nadpisać – tylko innym !important. A problemem jest zwiększona specyficzność selektorów – stąd powstało np BEM (https://bem.info), żeby ten problem ominąć.

komentarz 5 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Ok, to w ten sposób będzie chyba optymalnie.

.opcje input{
  width: 158px;
  margin-top: 2px;
  margin-left: 2px;
  display: block;
}

.opcje input.hide
{
  display: none;
}

http://codepen.io/anon/pen/MyaqjE

1
komentarz 5 marca 2016 przez Comandeer Guru (605,800 p.)

Raczej .opcje .hide jak już. A jeszcze lepiej: nadać klasę dla input (patrz: moje rozwiązanie).

+2 głosów
odpowiedź 5 marca 2016 przez Comandeer Guru (605,800 p.)
Pozwoliłem sobie przygotować własne rozwiązanie problemu: http://codepen.io/Comandeer/pen/wGKEaK
komentarz 5 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Kod JS bardziej skomplikowany w zrozumieniu niż proponowany przeze mnie :)

options = [].slice.call( document.querySelectorAll( '.options-option' ) )

Jak to działa? 

komentarz 5 marca 2016 przez Comandeer Guru (605,800 p.)

Może i bardziej skomplikowany, ale "czystszy" ;)

Co do tego fragmentu: to po prostu tworzy tablicę z obiektu NodeList, jaki jest zwracany przez document.querySelectorAll. W przypadku ES6 wystarczy użyć Array.from.

+1 głos
odpowiedź 5 marca 2016 przez ShiroUmizake Nałogowiec (46,300 p.)
Musisz strzyć element input. Nadać mu atybuty text i placeholder. I teraz jeżeli option zostanie klikniety o id=3  to max_alement = id, rób pętle (for var i = 0; i < max_element; i++) { document.getElementById("twoje id form").appendChild(input)}. Tak dużym w skrócie.
komentarz 5 marca 2016 przez Pietrak Pasjonat (18,850 p.)
Dokładnie. Tak samo bym zrobił.

Nie zapomnij, że każdy input musi mieć label. :)

Podobne pytania

0 głosów
1 odpowiedź 938 wizyt
pytanie zadane 28 czerwca 2016 w JavaScript przez n0s1gnal Użytkownik (700 p.)
0 głosów
2 odpowiedzi 291 wizyt
pytanie zadane 25 lipca 2016 w HTML i CSS przez czmyk Obywatel (1,100 p.)
0 głosów
1 odpowiedź 1,960 wizyt
pytanie zadane 21 maja 2017 w JavaScript przez jaco Początkujący (290 p.)

93,096 zapytań

142,059 odpowiedzi

321,513 komentarzy

62,441 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!

...