Autor | Zpráva | ||
---|---|---|---|
lachim15 Profil |
#1 · Zasláno: 6. 12. 2014, 18:18:19
Zdravím,
potřeboval bych znova poradit v js. Pro pochopení, mám předem několik předdefinovaných obrázků (16) + text. Po kliknutí na obrázek, který je zabalený v hypertextovém odkazu se změní předdefinované obrázky podle toho, co je napsané v odkazu. Těchto klikacích obrázků mám na stránce spoustu, kvůli tomu je zdrojový kód příliš dlouhý. Napadla mě taková věc, že bych si JS příkazy zapsané v odkazu zabalil do JS souboru a poté třeba jen do odkazu hodil ID funkce, kterou bych chtěl vyvolat, nebo něco podobného, snad mě pochopíte ... :) Jenomže JS moc nerozumím, a proto bych chtěl poprosit někoho o napsání nějakého jednoduchého scriptu. 1 Obrázek <a href='#' onclick="document.images['t1'].src='/obrazky/.../Obr. 1.png',document.images['t2'].src='/obrazky/.../Obr. 2.png',document.images['t3'].src='/obrazky/.../Obr. 3.png',document.images['t4'].src='/obrazky/.../Obr. 4.png',document.images['t5'].src='/obrazky/.../Obr. 5.png',document.images['t6'].src='/obrazky/.../Obr. 6.png',document.images['t7'].src='/obrazky/.../Obr. 7.png',document.images['t8'].src='/obrazky/.../Obr. 8.png',document.images['t9'].src='/obrazky/.../Obr. 9.png',document.images['t10'].src='/obrazky/.../Obr. 10.png',document.images['t11'].src='/obrazky/.../Obr. 11.png',document.images['t12'].src='/obrazky/.../Obr. 12.png',document.images['t13'].src='/obrazky/.../Obr. 13.png',document.images['t14'].src='/obrazky/.../Obr. 14.png',document.images['t15'].src='/obrazky/.../Obr. 15.png',document.images['t16'].src='/obrazky/.../Obr. 16.png'" class='nic'><img src='obrazky/.../nějaký_první_obr.png' class='...' data-text='Text' title='Text'></a> Další obrázek <a href='#' onclick="document.images['t1'].src='/obrazky/.../Obr. 1.png',document.images['t2'].src='/obrazky/.../Obr. 2.png',document.images['t3'].src='/obrazky/.../Obr. 3.png',document.images['t4'].src='/obrazky/.../Obr. 4.png',document.images['t5'].src='/obrazky/.../Obr. 5.png',document.images['t6'].src='/obrazky/.../Obr. 6.png',document.images['t7'].src='/obrazky/.../Obr. 7.png',document.images['t8'].src='/obrazky/.../Obr. 8.png',document.images['t9'].src='/obrazky/.../Obr. 9.png',document.images['t10'].src='/obrazky/.../Obr. 10.png',document.images['t11'].src='/obrazky/.../Obr. 11.png',document.images['t12'].src='/obrazky/.../Obr. 12.png',document.images['t13'].src='/obrazky/.../Obr. 13.png',document.images['t14'].src='/obrazky/.../Obr. 14.png',document.images['t15'].src='/obrazky/.../Obr. 15.png',document.images['t16'].src='/obrazky/.../Obr. 16.png'" class='nic'><img src='obrazky/.../další_obr.png' class='...' data-text='Text' title='Text'></a> .... JS na změnu textu: <script> var targets = document.getElementsByClassName('change'); for (var i in targets) { targets[i].addEventListener('click', function (e) { var target = e.target; document.getElementById('vyber').innerHTML = target.getAttribute('data-text'); }); } </script> |
||
mimochodec Profil |
#2 · Zasláno: 6. 12. 2014, 18:56:41
Nepotřebuješ http://www.w3schools.com/js/js_loop_for.asp ?
|
||
lachim15 Profil |
#3 · Zasláno: 6. 12. 2014, 19:53:53
Jo to vypadá použitelně, ale nevím jak to zakomponovat k sobě. Mám totiž vytvořenou tabulku, kde se mi mění obrázky podle "name" původního obrázku.
Pro přiblížení: http://nemesisup.cz/files/541/test.png Každý čtvereček (pod nadpisem Bedna a Další materiály) je 1 pozice pro obrázek a mění se podle výběru. |
||
mimochodec Profil |
Tomu úplně nerozumím, ale začal bych tím, že ty skripty z toho html vytáhneš do externího JS, tam si napíšeš nějakou funkci, které budeš klikancem předávat nějaký parametr a ten tam zpracuješ. Ty tvoje kódy pro dva obrázky se někde liší, ale netuším kde a nechce se mně to hledat. Popiš, co od toho chceš a vyviň nějakou inciativu, která pro začátek dosáhne toho, že do toho externího JS dostaneš ten parametr a třeba si ho vypíšeš (
alert (i); ).
Řekněme, že výsledné html by mohlo vypadat takto: <img id="img1" src="img1.png" onclick="zmen_obrazky(1)"> <img id="img2" src="img2.png" onclick="zmen_obrazky(2)"> .. (poupraveno) Všechno ostatní bude v tom externím JS. |
||
lachim15 Profil |
jj takhle jsem si to představoval, že to bude vypadat.
Jen doplním k tomu mému příkladu, to je jen na ukázku jak to vypadá, z čeho se to skládá a že je tam víc toho za sebou. Samozřejmě se to na stránce liší v obrázcích. EDIT: Nahraji živou ukázku pro pochopení. EDIT2: http://jaknaminecraft.cz/stranky/craft.php |
||
Časová prodleva: 8 dní
|
|||
lachim15 Profil |
Splácal jsem do kupy:
<img class='craft_img change' src="/obrazky/crafting/crafting_t.png" onclick="c1()" data-text='Craftovací bedna' title='Craftovací bedna'> function c1() { document.images['t1'].src='/obrazky/crafting/planks1.png' document.images['t2'].src='/obrazky/crafting/planks1.png', document.images['t3'].src='/obrazky/crafting/c1.png', document.images['t4'].src='/obrazky/crafting/planks1.png', document.images['t5'].src='/obrazky/crafting/planks1.png', document.images['t6'].src='/obrazky/crafting/c1.png', document.images['t7'].src='/obrazky/crafting/c1.png', document.images['t8'].src='/obrazky/crafting/c1.png', document.images['t9'].src='/obrazky/crafting/c1.png', document.images['t10'].src='/obrazky/crafting/crafting_t.png', document.images['t11'].src='/obrazky/crafting/planks2.png', document.images['t12'].src='/obrazky/crafting/planks3.png', document.images['t13'].src='/obrazky/crafting/planks4.png', document.images['t14'].src='/obrazky/crafting/planks5.png', document.images['t15'].src='/obrazky/crafting/planks6.png', document.images['t16'].src='/obrazky/crafting/c1.png' }; 1, Nešel by ten kód zjednodušit? 2, Těchto podobných funkcí budu mít za sebou víc, nešly by zkombinovat? Mění se pouze jména obrázků. |
||
mimochodec Profil |
Ale jo. Co třeba takhle?
var arr1 = "planks1,planks1,c1,planks1,planks1,c1,c1,c1,c1,crafting_t,planks2,planks3,planks4,planks5,planks6,c1"; var res = arr1.split(","); for (i = 0; i < res.length; i++) { document.images["t"+(i+1)].src="/obrazky/crafting/"+res[i]+".png"; } Omlouvám se za ty překlepy, snad už jsem spravil věechno. Veletlín je dobrý sluha, ale špatný pán. |
||
lachim15 Profil |
Super, funguje skvěle. Díky
|
||
Časová prodleva: 9 let
|
0