Delimitazione di quattro elementi nidificati in Javascript / HTML

Question

Ok, questo mi sta frustrando a non finire. Di recente ho codificato una pagina in JS per un mio amico che vuole mostrare le foto del matrimonio a una famiglia per vedere quali vorrebbero acquistare.

Ho usato un ciclo for per contare 1-904:

for (beginnum=1;beginnum<=904;beginnum++) { yada yada...

Quindi, ho usato Adobe Bridge per rinominare i file della fotocamera in 1-904 e le loro miniature (1-904 + _thumb) e ho usato il numero di loop per visualizzare 904 spazi dell'immagine e l'immagine correttamente numerata:

[nota: usando <) al posto del solito tag aperto poiché il sito non lo visualizzerà]

IE ...

document.write(beginnum + ":" + "<img src='pictures" + beginnum + "_thumb.jpg' />");

Opera ...

document.write("<div>" + beginnum + ":" + "<img src='pictures" + beginnum + "_thumb.jpg' /></div>")

Tutto funziona perfettamente in IE e Opera (con CSS esterno che modifica il div per non interrompere la linea).

Ho quindi creato una funzione per richiamare la versione grande dell'immagine quando si fa clic su.

Il problema è che, quando provo ad annidare questa funzione nell'HTML generato da JavaScript, avrei bisogno di quattro delimitatori. Ho sentito '' 'o & Quot; & Quot; & Quot; o l'amplificatore &; + numerico; lavoro in alcuni casi come terzo e quarto, ma non riesco a farli funzionare ... dove mi imbatto in un problema è qui ...

[nota: usando nuovamente <) per il tag aperto]

document.write("<a href='javascript:void(0); onClick=

Dato che ho già usato " e "Ora non mi resta più nulla da usare per chiamare la funzione quando si fa clic su un'immagine.

Di solito non chiedo alcun aiuto, ma questa volta non riesco a pensare a nient'altro che dovrebbe funzionare ... Presumo che forse usare JS per generare l'HTML mi lasci SOLO 2 delimitatori che saranno riconosciuti da il browser ma non ne sono sicuro, qualcuno lo sa per certo? Qualche correzione a cui qualcuno può pensare?

Grazie, ~ Z ~

Answer 1

Forse questo funzionerà

for (i=0; i<904;i++)
{
    document.write("<div class=\"DivClassName\"><img src=\"pictures_" + i + "thumb.jpg\" onclick=\"OpenAWindowAndDisplayTheBigPhoto(" + i + ")\"></div>");
}

Un altro approccio: supponiamo di mettere tutto in un <DIV id="mainDIV">

var mainDIV = document.getElementByID("mainDIV");
var div, img, a;
for (i=0; i<904; i++)
{
   div = document.createElement("DIV");
   div.className = "DivClassName";
   a = document.createElement("A");
   a.href = "javascript:void(0)";
   a.onclick = function() {OpenAWindowAndDisplayTheBigPhoto(i);};
   img = document.createElement("IMG");
   img.src = "pictures_" + i + "thumb.jpg";
   mainDIV.appendChild(div);
   div.appendChild(a);
   a.appendChild(img);   
};

Answer 2

Prova a costruire la stringa un pezzo alla volta invece di provare a creare l'intero valore letterale per document.write.

Ogni volta che le cose diventano troppo contorte da seguire, fai solo una parte alla volta.

var s;

s = "'Hello.' ";
s += '"I must be going."';

Answer 3

Senza vedere il codice è difficile da dire per certo, ma potresti voler trarre maggiore vantaggio dal fatto che javascript è un linguaggio di prima classe, quindi puoi creare funzioni e passarle come argomenti ad altre funzioni, oppure hanno funzioni restituiscono funzioni.

In questo modo, puoi scomporre la tua pagina in qualcosa che sembra un po 'più gestibile.

Inoltre, approfitta dell'evento onclick.

Dovresti essere in grado di semplificare il javascript e quindi evitare questo problema, IMO.