| Autor | Zpráva | ||
|---|---|---|---|
| Alťák Profil |
#1 · Zasláno: 13. 3. 2012, 16:50:21
Ahoj,
mám problém s jedním kouskem kódu a nemůžu pochopit, co je špatně. Má situace: Snažím se vytvořit kód, který po načtení stránky automaticky zajistí, že bude vytvořen obsah stránky. Na položky obsahu se dá kliknout a tím se uživatel přemístí na požadované místo. Toto je můj dosavadní kód umístěný v body: <ul id="faq_list"></ul>
<a name="q_1" rel="faq"></a>
<h3 name="q_1">otázka 1</h3>
<p>nějaká odpověď</p>
<a name="q_2" rel="faq"></a>
<h3 name="q_2">otázka 2</h3>
<p>nějaká odpověď</p>
<script type="text/javascript">
window.addEventListener('load',createFaqList,false);
function createFaqList() {
var faq = document.getElementById("faq_list");
var i = 0;
while (document.getElementsByTagName("a")[i] != undefined) {
var hyperlink = document.getElementsByTagName("a")[i];
if (hyperlink.rel == "faq") {
var li = document.createElement("li");
var a = document.createElement("a");
a.setAttribute("href", "#"+hyperlink.name);
a.innerHTML = document.getElementsByName(hyperlink.name)[1].innerHTML;
li.appendChild(a);
faq.appendChild(li);
}
i++;
}
}
</script>Problém nastává při použití metody "faq.appendChild(li);" - nastane nějaký záhadný bug a do stránky se vloží spooousty elementů li. Prohlížeč to přirozeně po chvíli zastaví. Máte nějaké nápady? Našli jste chybu? Už jsem zkoušel kdovíco, ale zdá se, že prohlížeč prostě nechce pobrat že chci vložit link do položky seznamu. Budu vděčný za jakékoliv návrhy. |
||
| Tori Profil |
#2 · Zasláno: 13. 3. 2012, 17:28:36
Představte si to jako iteraci nad obyčejným polem, od indexu 0 do konce. Když jsem u indexu třeba 3, narazím na vyhovující prvek (prvek.rel === "faq") a přidám na začátek pole nový prvek. Tím se všechny prvky posunou o jeden doprava a aktuální prvek už nebude mít index 3, ale 4. Při další iteraci tedy opět najdete vyhovující prvek (ten samý, co v předchozí iteraci), a tak to cykluje do nekonečna.
Tomu cyklování lze zabránit několika způsoby, ale proč rovnou nepoužijete jako kotvy ID nadpisů? <h3 id="q_1">Otázka 1</h3> Mohl byste tak vyhodit duplicitní kotvy na ř.3 a 7, a místo kolekce <a> prvků procházet kolekci nadpisů.
|
||
| _es Profil |
#3 · Zasláno: 13. 3. 2012, 17:36:14
Alťák:
„kód, který po načtení stránky automaticky zajistí, že bude vytvořen obsah stránky“ Aký je vlastne zmysel daného kódu? Prečo nie je ten „obsah“ normálne ako HTML obsah? document.getElementsByTagName("a") je „živá“ kolekcia, teda sú v nej všetky, aj neskôr pridané, prvky, preto v tvojom kóde nastane nekonečná slučka, viď aj vysvetlenie v [#2] Tori. Všetky odkazy máš aj v kolekcii document.links.
|
||
| Chamurappi Profil |
Reaguji na Alťáka:
„Našli jste chybu?“ Krom zmíněného problému: 1) Metoda window.addEventListener nefunguje ve všech prohlížečích.
2) Kotva pomocí name na <h3> také nebude fungovat ve všech prohlížečích, stejně tak to <h3> nepůjde všude najít metodou getElementsByName (poněvadž name na nadpis nepatří).
3) Používáš zbytečně setAttribute.
4) Atribut rel na odkazu vyjadřuje vztah stávající stránky k cílové. Není to prostor vyhrazený pro libovolnou změť znaků…
5) Odkaz hledáš zbytečně dvakrát (na řádcích 18 a 19). |
||
| Alťák Profil |
#5 · Zasláno: 13. 3. 2012, 20:13:07
Díky všem za reakci. Problém s vkládáním odkazů si už uvědomuji, uvedené chyby se pokusím odstranit a kód tak optimalizovat.
Myslím, že vlákno můžete uzavřít. Ještě jednou díky. |
||
| Chamurappi Profil |
#6 · Zasláno: 13. 3. 2012, 20:28:36
Reaguji na Alťáka:
Já bych to napsal cca takhle: function createFaqList()
{
var faq = document.getElementById("faq_list");
for(var i = 0, h; h = document.getElementsByTagName("h3")[i]; i++)
{
if(!h.id) continue;
var li = document.createElement("li");
var a = document.createElement("a");
faq.appendChild(li);
li.appendChild(a);
a.href = "#" + h.id;
a.innerHTML = h.innerHTML;
}
}function createFaqList()
{
var faq = [];
for(var i = 0, h; h = document.getElementsByTagName("h3")[i]; i++)
if(h.id)
faq.push("<li><a href=\"#" + h.id + "\">" + h.innerHTML + "</a>");
document.getElementById("faq_list").innerHTML = faq.join("");
}Nadpisům bych nedával name (ani <a name> před ně), ale jen id.
|
||
| Alťák Profil |
#7 · Zasláno: 13. 3. 2012, 20:46:06
Dobrá řešení - abych pravdu řekl, nevěděl jsem ani, že se dá for cyklus takovým způsobem zapsat. Jsem zvyklý, že v prostřední sekci je vždy něco jako " i < h ".
Deklarace proměnné h přímo v té sekci je promyšlená. Myslím si správně, že to funguje tak, že pokud už prohlížeč nenalezne h s indexem i, tak vrátí hodnotu false a tím se cyklus for ukončí? Určitě navrhované řešení vyzkouším. Díky |
||
| Radek9 Profil |
#8 · Zasláno: 13. 3. 2012, 22:07:28
Alťák:
„tak vrátí hodnotu false“ Přesněji řečeno vrátí undefined, což se překonvertuje na false. Chamurappi: A nebude se pořád dokola volat metoda getElementsByTagName? Pokud ano, nebylo by lepší si ten NodeList uložit ještě do nějaké proměnné? |
||
|
Časová prodleva: 12 let
|
|||
0