Autor | Zpráva | ||
---|---|---|---|
Pam pam Profil * |
#1 · Zasláno: 10. 1. 2022, 22:49:11
Zdravím,
tady na hoře mám formulář, který by měl po kliknutí zobrazit jenom ty vybrané bloky. Je to funkce hideSwitcher(). Funguje to tak, že po kliknutí se projdou inputy, z nich si JS vezme name a pomocí documnet.getElementById vrátí blok, který chci schovat. docs.jednoduse.cz Funguje to jen na začátku, ale pak to přestane fungovat správně. Nedaří se mi odhalit chybu v logice. |
||
Kajman Profil |
#2 · Zasláno: 11. 1. 2022, 09:26:44
Pošlete sem funkci HideSwitcher, na stránce není. Vyvarujte se duplicitních id - hlavně pokud jedno id chcete schovat.
|
||
Pam pam Profil * |
#3 · Zasláno: 11. 1. 2022, 11:23:10
Pardón, nahrál jsem na server nesprávný soubor, mám to v header.php. Už jsem to aktualizoval.
|
||
Kajman Profil |
#4 · Zasláno: 11. 1. 2022, 11:51:04
Stále tam máte duplicitní id, proto to nebude fungovat! Dvojice <label for><input id> a <input name><div id> musí mít jiný identifikátor. Navíc musíte dodržovat velikost písmen v názvu funkce. Jednou máte hideSwitcher jednou HideSwitcher.
|
||
Pam pam Profil * |
#5 · Zasláno: 11. 1. 2022, 12:59:33
Chcete říct, že když mám div id=US a mám input name=US tak je to špatně?
Problém je, že právě to name beru abych ho použil k získání elementu div. label for jsem opravil. |
||
Kajman Profil |
#6 · Zasláno: 11. 1. 2022, 13:33:00
Ne, tato kombinace je správná. Ale u toho inputu máte i atribut id a jako na potvoru také se stejnou hodnotu US. Proto podle name najdete id US, ale může to být ten input místo toho divu.
Živá ukázka |
||
Pam pam Profil * |
#7 · Zasláno: 11. 1. 2022, 14:13:58
Ale já mám takový dojem, že jste se díval na ten neaktualizovaný soubor. Protože jsem nahrával index.php místo header.php . Vy jste se na to podíval a tam asi nebyly ty aktuální idéčka. Aktuální idéčka mám takto s příponou f_:
<fieldset id=HideBlocks> <legend>Tato funkce se právě testuje... </legend> <input type="checkbox" id="f_CCA" name="CCA" checked> <label for="f_CCA" title="Kanadská Covid Care Alliance">CCA</label> <input type="checkbox" id="f_US" name="US" checked> <label for="f_US" title="Rozsudky Ústavního Soudu">ÚS</label> <input type="checkbox" id="f_Facebook" name="Facebook" checked> <label for="f_Facebook" title="Facebook">FB</label> <input type="checkbox" id="f_Youtube" name="Youtube" checked> <label for="f_Youtube" title="Youtube">YT</label> <input type="checkbox" id="f_doporucene" name="doporucene" checked> <label for="f_doporucene">doporučené</label> <input type="button" id="f_hide" name="hide" value="Schovat bloky" onclick="hideSwitcher(this)"> </fieldset> Kontroloval jsem to několikrát (zobrazím kód a dám hledat id= a vidím to barevně v prohlížeči - takže slepý snad nejsem). |
||
Kajman Profil |
#8 · Zasláno: 11. 1. 2022, 14:46:28
Tak super, hlavní problém je opraven. Ještě v té funkci používáte neplatnou hodnotu pro display. Mrkněte na tu živou ukázku.
|
||
Pam pam Profil * |
#9 · Zasláno: 11. 1. 2022, 15:32:53
Díky. Myslím, že ta logika ta funkce jakš takž funguje, ještě se podívám jestli někde nemám chybu. Ještě studie jsem tam nedal, to taky chci schovat...
|
||
Pam pam Profil * |
#10 · Zasláno: 11. 1. 2022, 19:23:28
Ještě mám dotaz. Všiml jsem si, když otevřu stránku je to OK. Když aktualizuji pomocí F5, tak se vše schová automaticky. Kdežto já chci aby se bloky schovaly jen pokud kliknu na tlačítko. Jak to opravit?
|
||
Kajman Profil |
#11 · Zasláno: 11. 1. 2022, 19:24:42
Nebudete nastavovat onload.
|
||
Pam pam Profil * |
#12 · Zasláno: 11. 1. 2022, 21:24:12
Mohl byste mi prosím ještě poradit, když si tu stránku uložíte do PC a přepíšete tu funkci a zkuste ve FF:
function hideSwitcher() { var childs = document.querySelector('fieldset#HideBlocks').children; for(var i = 0; i < childs.length; ++i){ if(childs[i].type == 'checkbox') { var block = document.getElementById( childs[i].name); if(childs[i].checked) { childs[i].checked = false block.style.display="none"; console.log(childs[i].name); console.log("Turned Off"); } else { childs[i].checked = true block.style.display="block"; console.log(childs[i].name); console.log("Turned On"); } } } } Vymažu console log. A zase zmáčknu Schovat prvky. Tak má se zobrazit CCA. console log píše že CCA je zapnuté, ale očividně není. Styl nastavený: <div id="CCA" style="display: none;"> else { childs[i].checked = true block.style.display="block"; console.log(childs[i].name); console.log("Turned On"); } |
||
Časová prodleva: 1 rok
|
0