Autor Zpráva
qik
Profil *
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
Reaguji na qika:
Nahraď this.parentNode v atributu onclick za document.body.
Chamurappi
Profil
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
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 *
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
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
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
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>

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: