| Autor | Zpráva | ||
|---|---|---|---|
| qik Profil * |
#1 · Zasláno: 28. 5. 2015, 15:56:07
Ahoj,
přetvořil jsem si skript na prohazování tříd, který kupodivu funguje. Jen mi nejde do hlavy proč - když input na spuštění funkce obalím např. odstavcem <p><input...></p> - přestane script fungovat. Díky za odpovědi <script>
function prohodit(element, schovat, ukazat) {
element.className = element.className == schovat ? ukazat : schovat;
}
</script>
<style>
.schovat c{visibility: hidden}
.ukazat c{visibility: visible; color: green; display:inline}
.nevidet {visibility: hidden}
.nevidim {display: none}
.red {color: red}
</style>
<button onclick="prohodit(this.parentNode, 'ukazat', 'schovat')">
Zobrazit/Skrýt </button>
<p>Odstavec <c class="nevidet"> a zde elem. C ukrytý</c> a zde konec odstavce<br></p>
<p>Odstavec <c class=nevidim>Toto je ukrytý DISPALY:none</c> a tu zbytek odstavce</p> |
||
| Fisir Profil |
#2 · Zasláno: 28. 5. 2015, 16:21:21
Reaguji na qika:
Nahraď this.parentNode v atributu onclick za document.body.
|
||
| Chamurappi Profil |
#3 · Zasláno: 28. 5. 2015, 20:44:12
Reaguji na qika:
Element <c> ti nebude fungovat ve všech prohlížečích. Jaký máš důvod k vynalézání vlastních elementů?
„když input na spuštění funkce obalím např. odstavcem <p><input...></p> - přestane script fungovat“ Měníš třídu rodičovi. Co je rodičem <input>u, když ho obalíš do <p>?
|
||
| snazimse Profil |
#4 · Zasláno: 28. 5. 2015, 22:03:39
qik:
Pokud by jsi šel o jednu strukturu teoreticky by stačilo: jen přidat další rodič this.parentNode.parentNode. Ale lepší řešení je od Fisira, je jistější.
|
||
| qik Profil * |
#5 · Zasláno: 29. 5. 2015, 11:07:11
Element <c> tam je protože když tam byl span, div, p... schovávalo mi to i ty ostatní elementy. Až si s tím budu hrát, zkusím to nějak obalit, či přidat třídu... Díky
|
||
| Chamurappi Profil |
Reaguji na qika:
Normálnější by mi přišlo zaměřovat to přes něco jiného, než název elementu… třeba přes tu třídu. |
||
| Joker Profil |
Chamurappi [#6]:
Ale pak mu ten skript zase nebude fungovat, protože nepočítá s tím, že element bude mít víc než jednu třídu. (Pokud by nechtěl přehodit všechny elementy s tou jednou třídou na druhou -čímž by mohl použít přímo tu stejnou třídu-, což nebývá typický případ.) Já bych doporučil si pro manipulaci s CSS třídami zřídit obecné funkce, jsou na pár řádků: function hasClass(element, clsName) {
var elmCls = (element) ? " " + element.className + " " : "";
return (elmCls.indexOf(" " + clsName + " ") !== -1);
}
function addClass(element, clsName) {
if (element && !hasClass(element, clsName)) {
element.className += " " + clsName;
}
}
function removeClass(element, clsName) {
if (element) {
var elmCls = " " + element.className + " ";
element.className = elmCls.replace(" " + clsName + " ", " ").trim();
}
}Pak to bude otázka zavolání nejdřív removeClass a pak addClass. |
||
| juriad Profil |
#8 · Zasláno: 29. 5. 2015, 13:45:54
Joker:
Otázkou je, proč nepoužít rovnou classList s shimem pro starší prohlížeče. developer.mozilla.org/en-US/docs/Web/API/Element/classList Mimochodem, ten trim ti nefunguje v IE8. |
||
| Joker Profil |
#9 · Zasláno: 29. 5. 2015, 13:53:14
juriad:
„Otázkou je, proč nepoužít rovnou classList s shimem pro starší prohlížeče.“ Taky možnost, ale tohle je pár řádků a bude to fungovat všude. „Mimochodem, ten trim ti nefunguje v IE8.“ Aha, tak ten by se mohl vyškrtnout. Sice by se tam pak mohly množit mezery, ale co jsem to testoval, vesměs to asi nevadí. |
||
| Chamurappi Profil |
#10 · Zasláno: 29. 5. 2015, 14:22:26
Reaguji na Jokera:
„Ale pak mu ten skript zase nebude fungovat, protože nepočítá s tím, že element bude mít víc než jednu třídu.“ To jsem si také nejprve myslel, ale pak jsem si uvědomil, že tenhle problém nemá. Nepotřebuje ani classList, ani žádný jiný aparát na manipulaci s více třídami. Nemění třídy elementů <c>…
|
||
|
Časová prodleva: 9 let
|
|||
0