Delimitando quatro itens aninhados em JavaScript / HTML

Question

Ok este é me frustrante para nenhum fim. Recentemente codificado uma página na JS para um amigo meu que quer exibir fotos de casamento para uma família para ver quais eles gostariam de compra.

Eu usei um loop for para contar 1-904:

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

Então, eu usei o Adobe Bridge para renomear os arquivos da câmera para ser 1-904 e suas miniaturas (1-904 + _thumb) e usou o número de loop para exibir 904 espaços de imagem, ea imagem com o número corretamente:

[Nota: usando <) no lugar da tag aberta habitual desde que o site não vai exibi-lo]

IE ...

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

Opera ...

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

Isso tudo funciona perfeitamente no IE e Opera (com CSS externo modificando o div não quebra de linha).

Então criei uma função para chamar a versão grande da imagem quando clicado.

O problema é que quando eu tento e ninho esta função no JavaScript gerado HTML eu precisaria de quatro delimitadores. Eu já ouvi ''' ou ''" ou o & + numérico; trabalho em alguns casos, como um terceiro e quarto, mas eu não consigo levá-los para o trabalho ... onde eu me deparo com um problema é aqui .. .

[Nota: novamente usando <) para a tag aberta]

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

Desde que eu já usei para cima "e" Agora tenho mais nada para usar para chamar a função quando uma imagem é clicado.

Eu normalmente não pedir qualquer ajuda, mas desta vez eu não consigo pensar em qualquer outra coisa que deve funcionar ... suponho que talvez usando JS para gerar as folhas HTML me com apenas 2 delimitadores que serão reconhecidos por o navegador, mas eu não estou certo, ninguém sabe ao certo? Qualquer correções ninguém pode pensar?

Obrigado, ~ Z ~

Answer 1

Talvez isso vai funcionar

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

Outra abordagem: Suponha que você colocar tudo dentro de um <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

Tente construir a string de uma peça de cada vez, em vez de tentar construir todo o literal para o document.write.

Sempre que as coisas ficam muito complicado de seguir, basta fazer uma parte de cada vez.

var s;

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

Answer 3

Sem ver o código é difícil dizer para um fato, mas você pode querer tirar mais proveito do fato de que o Javascript é uma linguagem de primeira classe, assim você pode criar funções e passá-las como argumentos para outras funções ou têm funções funções retornam.

Ao fazer isso, você pode se decompor sua página em algo que soa um pouco mais administrável.

Além disso, aproveitar o evento onclick.

Você deve ser capaz de simplificar o javascript e assim evitar esse problema, IMO.