Skrývání textu - kde mám chybu? – JavaScript, AJAX, jQuery – Fórum

Fórum › JavaScript, AJAX, jQuery

Skrývání textu - kde mám chybu?

end 0

Newbie

21. 5. 2015 #1

Zdravím, poradil by někdo prosím, proč se mi text zobrazuje ihned na stránce a proč nefunguje skrývání?

Děkuji

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="content-Type" content="text/html; charset=utf-8" />
<title>Změna obrázku při najetí kursoru</title>
<style>
  .js .obal div div {display: none; padding: .3em .5em}
  .js .obal div.show div {display: block}
  .js .obal h3 {cursor: pointer}
  .obal div {background: #efefef}
  .obal div h3 {background: #0D6AB7; color: #fff; padding: .3em .5em}
  .obal div.show h3 {background: #1081DD}

  a.tlacitko {padding: .5em; background: #D62988; border: 1px solid #B41F71; color: #fff; cursor: default; text-decoration: none; border-radius: 5px}
  a.tlacitko:hover {background: #E371AF}
  a.tlacitko:active {position: relative; top: 1px; left: 1px}

</style>


<script>
var el = document.getElementById("obal");
el.className += " js";
document.body.className += " js";

function clearAll() {
	var div = el.getElementsByTagName("div");
	for (var i = 0; i < div.length; i++) {
		div[i].className = "";
	}
}

function init() {
	if (!el) return;
	var div = el.getElementsByTagName("div");

	for (var i = 0; i < div.length; i++) {
		if (div[i].parentNode != el) continue;
		div[i].getElementsByTagName("h3")[0].onclick = function () {
			var div = this.parentNode;
			var puvodni = div.className;
			clearAll();
			div.className = (div.className == "show" || puvodni == "show") ? "" : "show";
		}
	}
}

init();
</script>
</head>
<body>

 <div class="obal js" id="obal">
  <div>
    <h3>HTML
    <p>To je <a href="http://seznam.cz" class="tlacitko">odkaz</a> — vypadá jako tlačítko.</p>
</h3>
<div><p>HTML rozkliknutý text</p></div>
  </div>
  </div>
    </div>
  </div>
</div>


</body>
</html>

Nahlásit jako SPAM

IP: 89.102.247.–

amertak0

Návštěvník

21. 5. 2015 #2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
    <meta http-equiv="content-Type" content="text/html; charset=utf-8" />
    <title>Změna obrázku při najetí kursoru</title>
    <style>
        .js .obal div div {display: none; padding: .3em .5em}
        .js .obal div.show div {display: block}
        .js .obal h3 {cursor: pointer}
        .obal div {background: #efefef}
        .obal div h3 {background: #0D6AB7; color: #fff; padding: .3em .5em}
        .obal div.show h3 {background: #1081DD}

        a.tlacitko {padding: .5em; background: #D62988; border: 1px solid #B41F71; color: #fff; cursor: default; text-decoration: none; border-radius: 5px}
        a.tlacitko:hover {background: #E371AF}
        a.tlacitko:active {position: relative; top: 1px; left: 1px}

    </style>



</head>
<body>

<div class="obal js" id="obal">
    <div>
        <h3>HTML
            <p>To je <a href="http://seznam.cz" class="tlacitko">odkaz</a> — vypadá jako tlačítko.</p>
        </h3>
        <div><p>HTML rozkliknutý text</p></div>
    </div>
</div>

<script>
    var el = document.getElementById("obal");
    el.className += " js";
    document.body.className += " js";

    function clearAll() {
        var div = el.getElementsByTagName("div");
        for (var i = 0; i < div.length; i++) {
            div[i].className = "";
        }
    }

    function init() {
        if (!el) return;
        var div = el.getElementsByTagName("div");

        for (var i = 0; i < div.length; i++) {
            if (div[i].parentNode != el) continue;
            div[i].getElementsByTagName("h3")[0].onclick = function () {
                var div = this.parentNode;
                var puvodni = div.className;
                clearAll();
                div.className = (div.className == "show" || puvodni == "show") ? "" : "show";
            }
        }
    }

    init();
</script>
</body>
</html>

V dobe kdy se vykonava ten JS (v hlavicce) neni jeste dom ready (ty elementy jeste neexistuji).

Pokud das ten JS uplne na konec pred </body>, tak mas jiste, ze tam ty elementy mas.

To, ze by bylo lepsi aspon pouzit JQuery a nejak strukturovat ten JS kod aspon na AMD modul bych asi mozna taky zacal resit :)

Nahlásit jako SPAM

IP: 89.103.130.–

peter

~ Anonymní uživatel
~ 3981 příspěvků

21. 5. 2015 #3

Ono by stacilo mozna zmenit radek
if (!el) return; na...
if (!el) {alert ('element nenalezen'); return;}
Pripadne si tam pridat mezi radky kodu alerty a sledovat, ktery se vypise a ktery uz ne. Na tom radku je pak problem

A treba pozdeji budes mit otazku, proc ti to rozhasi styly pri skyvani, tak se zamer na radek
div[i].className = "";
kterej css kompletne smaze, co by mohlo byt neprijemne zvlast na divu
<div class="obal js" id="obal">

Nahlásit jako SPAM

IP: 2001:718:2601:1f7:14e0:f0...–

End

~ Anonymní uživatel
~ 49 příspěvků

21. 5. 2015 #4

g#3 peter
Hmm, tak opravený tím prohozením to chodí. No, myslel jsem, že to bude snazší :-(

Přitom nechci nic víc, než docíliti toho, že budu mít nějaký nadpis (třeba jako v příkladu výše HTML) a vedle v hlavičce dvě tlačítka a každé z nich bude ukazovat vlastní text (a vlastí styl css).

Nedal byste to někdo náhodou dohromady?

Nahlásit jako SPAM

IP: 89.102.247.–

End

~ Anonymní uživatel
~ 49 příspěvků

21. 5. 2015 #5

#4 End
Hmm a mam nějakou chybu v logice věci. Protože záměrem bylo, že mohu rozkliknout jakýkoliv text aniž bych změnil třeba ten předchozí rozkliknutý, prostě se zobrazí vždy jeden z více, což tedy záměr nebyl. To bude asi to, co zminoval peter.... hmm, no, jak jsem psal, uz to tak jako snadny pro mne nevidim.

Nahlásit jako SPAM

IP: 89.102.247.–

peter

~ Anonymní uživatel
~ 3981 příspěvků

22. 5. 2015 #6

Jestli ti jde o to, aby se to po rozbaleni neskryvalo, kdyz tam toho mas vic, tak to dela preci ten radek clearAll(); A samozrejme tam nesmis mit duplicitne id, pac id je jedinecne. Napr takove <div class="obal js" id="obal"> tam musi byt jen jednou.

<div class="obal js" id="obal">
    <div>
        <h3>HTML
            <p>To je <a href="http://seznam.cz" class="tlacitko">odkaz</a> - vypadá jako tlačítko.</p>
        </h3>
        <div><p>HTML rozkliknutý text</p></div>
    </div>

    <div>
        <h3>HTML
            <p>To je <a href="http://seznam.cz" class="tlacitko">odkaz</a> - vypadá jako tlačítko.</p>
        </h3>
        <div><p>HTML rozkliknutý text</p></div>
    </div>
</div>

Nahlásit jako SPAM

IP: 2001:718:2601:1f7:e443:64...–

end 0

Newbie

22. 5. 2015 #7

#6 peter
No to dává logiku, ale když budu mít proměnný počet rozklikávacích položek (jedno 5, jindy 10), tak to musím mít takový počet id nebo class? A co když jich budu mít třeba 40? To asi na to bude nějaká finta, aby script věděl "teď jsem klepl na položku X a chci ji rozbalit" ostatní beze změny.

Nahlásit jako SPAM

IP: 89.102.247.–

peter

~ Anonymní uživatel
~ 3981 příspěvků

22. 5. 2015 #8

Ja ti nerozumim. Zkusil jsi ten html kod, co jsem k tomu pridal? Vidis v nem duplicitne id? Ja taky ne.
Jak ti to funguje? Kdyz kliknes na prvni, rozbali se prvni. Kdyz na druhou, rozbali se druha, prvni schova. Tak mas postaveny ten program, ne? Tak jsi to zamyslel.

Pak jsem mel jeste druhy predpoklad, ze tomu houby rozumis, kod mas odnekud jinud. Tak jsem ti radeji pridal verzi html, ktera prepina mezi obema polozkami a pridal info, co smazat/zakomentovat, kdyz bys tam nechtel, aby se to samo sryvalo pri prekliknuti na jinou. Ten kod mi prisel totiz na zacatecnika az prilis promysleny :)

Nahlásit jako SPAM

IP: 2001:718:2601:1f7:e443:64...–

end 0

Newbie

25. 5. 2015 #9

#8 peter
Ahoj. Zkusil. Vyloučil jsem tu řádku ClearAll(). Funguje to tak, jak byla moje základní vize, že by to mělo být.

No, zkusil jsem přidat do H3 tagu to tlačítko

<h3>HTML <a href="" class="tlacitko" >Ukaž Mapu</a> 
             <a href="" class="tlacitko">Kontakt</a>
    </h3>

dokonce i funguje, ale text, co se má zobrazit jen problikne. Líbilo by se mi mít v záhlaví 2 tlačítka a podle toho na jaké bych kliknul, tak by se mi zobrazil příslušný text s podrobnostmi. Třeba něco jako Ukaž mapu a druhé Kontakt. Případně by se tedy ukázali obě položky.

Pravdu máš v tom, že tomu zase až tak nerozumím, spíš to zkouším intuitivně měnit. No, ale jak vidíš, moc jsem s tím přes víkend nikam nepohnul. Poradil bys s tady tím?

Nahlásit jako SPAM

IP: 89.177.14.–

← Zpět na seznam vláken ← Zpět do Fóra