JavaScript: načtení ID elementů do pole

[ZAJDAN]

Ahoj,
mám několik svg obrázků a snažím se ID z těchto svg dostat do pole, ale nedaří se:

Kód: [Vybrat]

var svg = document.getElementById("svg");
var svgElement = svg.contentDocument; //get the inner DOM .svg
var t10open = new Array();
            t10open.push(svgElement.getElementById("door-open-T10"));
            t10open.push(svgElement.getElementById("door-opened-big-right-T10"));
            t10open.push(svgElement.getElementById("door-opened-small-right-T10"));
            t10open.push(svgElement.getElementById("door-opened-big-left-T10"));
            t10open.push(svgElement.getElementById("door-opened-small-left-T10"));
zkoušel jsem i:

Kód: [Vybrat]

var svg = document.getElementById("svg");
var svgElement = svg.contentDocument; //get the inner DOM .svg
var t10open = new Array();
            t10open[0] = svgElement.getElementById("door-open-T10");
            t10open[1] = svgElement.getElementById("door-opened-big-right-T10");
            t10open[2] = svgElement.getElementById("door-opened-small-right-T10");
            t10open[3] = svgElement.getElementById("door-opened-big-left-T10");
            t10open[4] = svgElement.getElementById("door-opened-small-left-T10");
ovšem alert(t10open.join("\n")); mi vždy vrací:
[object SVGGElement]
[object SVGGElement]
[object SVGGElement]
[object SVGGElement]

[Reklama]

[ZAJDAN]

ono to bude nejspíš správně, ale abych upřesnil o co mi jde,
chci pomocí jedné proměné manipulovat s několika objekty různých ID a tak mne napadlo tu jednu proměnou definovat jako pole prvků(těch oněch různých ID)

[sheeryjay]

Nejsem sice nějak velký javascriptař, ale tohle mi přijde jako v pohodě chování.

Děláš pole objektů (resp. referencí na ně) které odpovídají DOM objektům HTML. A následně je dáš vypsat. Protože asi není nijak nadefinováno jak rozumně převést tak tam napíše jen že to je SVGElement. Takže jen potřebuješ na ty objekty pole zavolat metody co patří k SVGElementům.

A nebo jestli skutečně chceš mít v poli IDčka a ne objekty tak tam ty IDčka dát viz:

Kód: [Vybrat]

  t10open.push("door-opened-big-left-T10"); 
Také počítej s tím že pokud v JS funguje garbage collector podobně jako v Javě tak po dobu co jsou v poli se budou objekty (pokud dáš reference na objekty) držet v paměti a zabírat místo, i když už je ze stránky smažeš.

[ZAJDAN]

díky...
v případě kdy se chytám pouze jednoho elementu:

Kód: [Vybrat]

var svg = document.getElementById("svg"); //this ID has each SVG file and is loaded separately
var svgElement = svg.contentDocument; //get the inner DOM .svg
var t10open = svgElement.getElementById("door-open-T10");
v HTML mám checkbox #T10 a pomocí js funkce manipuluji:

Kód: [Vybrat]

if ($("#T10").is(":checked")) {
t10open.setAttribute("display" , "visible");
} takto to funguje,

ale jakmile je proměná t10open polem prvků vyhodí to:
Unhandled Error: 't10open.setAttribute' is not a function

nebude to tím, že na pole nelze použít změnu attributu?

[sheeryjay]

Ano, ale hlavně jde o to, že pole je seznam prvků, jak má javascript vědět co chceš udělat s nimi všemi jako celkem? Pole vůbec nemá metodu setAttribute a i kdyby mělo, tak neudělá to co si myslíte.

Co potřebuješ udělat je cyklus a v něm vše provést pro všechny prvky toho pole postupně (pozn.: ten join co jsi použil interně také používá cyklus).

Kód: [Vybrat]

for (index=0; index<t10open.length; index++) {
    t10open[index].setAttribute("display" , "visible");
}   
t10open[index] vybírá index-tý prvek z pole. Mohl bych také použít různé možnosti zmíněné na http://stackoverflow.com/questions/9329446/how-to-do-for-each-over-an-array-in-javascript ale tohle je nejjednodušší.

Pozn. jestliže čemukoliv z toho kusu kódu který jsem napsal nerozumíte, a javascript potřebujete jakkoliv více používat (např. toto nebylo jediné vaše využití JS na 5 let dopředu), tak bych vám doporučil přečíst si nějakou knihu (určitě bych doporučil Javascript The Good Parts - ale není vhodná jako první kniha podle které by se někdp měl učit programovat obecně - jen pokud už umí v nějakém jiném jazyce) nebo udělat nějaký kurz. Tohle jsou jedny ze základních věcí a bez nich bude pro vás cokoliv těžké a budete se příliš muset ptát o radu.

Docela hezký kurz (zdarma) vhodný i pro lidi kteří ještě neprogramovali je např. https://www.coursera.org/course/cs101
Nějaké další kurzy jsou i na Udacity, možná edX.

[Reklama]

[ZAJDAN]

děkuji,
všichni se stále učíme a radíme, a já třevba zapochodu bez nějakých kurzů a pod. Komunita je od toho aby si poradila a ne vytýkala, že pokud tomuto nerozumíš vyprdni se na to apodobně :_)

[sheeryjay]

Však jsem také neříkal abyste se na to vyprdnul. To nemělo být jakékoliv zhazování, nebo dokazování si něčeho.

Jen jsem Vám chtěl naznačit že pro Vás bude časově ekonomičtější si přečíst za 5 hodin nějakou 200 stránkovou knihu, než se trápit mnohem déle s kódem. Netvrďte mi že jste ho napsal a hned poté jste se ptal ;-)? Pochopitelně že jste měl respekt k času ostatních a nechtěl jste je otravovat takže různými pokusy jste strávil třeba jen na téhle jedné věci 30 a více minut.

Ještě pár takových a už bude ekonomičtější si něco přečíst ;-).

Pozn.: knihy se píší právě proto aby někomu usnadnily učení se něčeho (pokud odhlédneme od abstraktní možnosti že to je kvůli výdělku - u nás prakticky nemožné).

[ZAJDAN]

několik knih jsem zakoupil, ale z praxe jsem zjistil, že nejlépe se naučím na konkrétních příkladech, kde se na něčem potrápím a díky tomu, že se moje dotazy dostanou do fór to může pomoci dalším lidem.
Jinak abych to dokončil.....pokusil jsem se čistý JS zápis:
dosazení prvků do pole:

Kód: [Vybrat]

var svg = document.getElementById("svg");
var svgElement = svg.contentDocument; //get the inner DOM .svg
var t10open = new Array();
 t10open[0] = svgElement.getElementById("door-open-T10");
 t10open[1] = svgElement.getElementById("door-opened-big-right-T10");
 t10open[2] = svgElement.getElementById("door-opened-small-right-T10");
 t10open[3] = svgElement.getElementById("door-opened-big-left-T10");
 t10open[4] = svgElement.getElementById("door-opened-small-left-T10");
manipulace s objekty v poli:

Kód: [Vybrat]

if ($("#T10").is(":checked")) {
t10open.forEach(function(elements) {
 elements.setAttribute("display", "block");
});
}
takto se mi manipulace s objekty nepodařila rozchodit,
ale zápisem jQuery již ano:

Kód: [Vybrat]

if ($("#T10").is(":checked")) {
$.each(t10open, function(i,element) {
$(t10open).attr("display" , "none")});
}

[haha]

Místo new Array() bych osobně všude použil literál []. Na funkci to nemá vliv, je to ale přehlednější. Stejně tak místo přidávání prvků do pole po jednom indexu bude zase přehlednější literál:

Kód: [Vybrat]

array = [
    prvek,
    prvek,
    prvek,
    ...
]

Array.prototype.forEach chybí v IE8 a nižších. Když už používáš jQuery, tak můžeš pole radši iterovat pomocí $.each(), nebo využít toho, co už jsi sám zjistil - jQuery při zavolání některých metod používá iteraci všech vybraných prvků interně samo o sobě.


Minule jsem se ti snažil vysvětlit, že atribut "display" a CSS vlastnost "display" nemají vůbec nic společného. Zkusím to rozepsat trochu víc. Mějme element #test:

Kód: [Vybrat]

<div id="test">test</div>

po zavolání $('#test').attr('display', 'none'); bude výsledek vypadat takhle:

Kód: [Vybrat]

<div id="test" display="none">test</div>

po zavolání $('#test').css('display', 'none'); to bude vypadat následovně:

Kód: [Vybrat]

<div id="test" style="display: none;">test</div>

V prvním případě to může fungovat jedině, pokud máš někde ve stylech zašitou podobnou deklaraci(což by ovšem bylo dost nesmyslné počínání):

[display="none"] {
    display: none;
}

Samo o sobě to ale nedělá lautr nic.

[ZAJDAN]

díky....
jde o to, že já ten attribut měním u elementu uvnitř SVG a tam už ten attribut mám definovaný např:
<g id="door-open-T10" display="none">
a mám důvod ho mít přednastavený, protože je tam několik vrstev, které je potřeba už v defaultu schovat a některé zobrazit

proto mi stačí používat:
$(t10open).attr("display" , "block")});

[haha]

Úplně mi vypadlo, že se bavíme o SVG, minule se řešilo HTML... V případě SVG je to ok.

[ZAJDAN]

nyní se snažím na prvku v poli poštvat funkci vyvolanou událstí (mousedown)

Kód: [Vybrat]

$.each(lock, function(i,element) {
    $(lock).on("mousedown",function(){tab12[0].click() }) 
});
ale něco tam mám špatně, netuší někdo?
díky

[Sten]

nyní se snažím na prvku v poli poštvat funkci vyvolanou událstí (mousedown)

Kód: [Vybrat]

$.each(lock, function(i,element) {
    $(lock).on("mousedown",function(){tab12[0].click() }) 
});
ale něco tam mám špatně, netuší někdo?
díky

Místo $(lock) by tam mělo být $(element)

[ZAJDAN]

díky,
s tím elementem jsem to již také zkoušel, ale právě proto, že se ani tak funkce neprovede jsem byl odkázán se s problémem podělit.