Délimitation de quatre éléments imbriqués dans Javascript / html

Question

D'accord, cela me frustre sans fin. J'ai récemment codé une page dans JS pour un de mes amis qui souhaite afficher des photos de mariage pour une famille afin de voir celles qu'ils aimeraient acheter.

J'ai utilisé une boucle for pour compter 1-904:

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

Ensuite, j'ai utilisé Adobe Bridge pour renommer les fichiers de la caméra 1-904 et leurs vignettes (1-904 + _thumb), puis le numéro de la boucle pour afficher 904 espaces image et l'image correctement numérotée:

[note: utiliser <) à la place de la balise open habituelle, car le site ne l'affiche pas]

IE ...

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

Opéra ...

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

Tout cela fonctionne parfaitement dans IE et Opera (avec un CSS externe modifiant le div pour qu'il ne saute pas de ligne).

J'ai ensuite créé une fonction permettant d'appeler la version agrandie de l'image lorsque l'utilisateur clique dessus.

Le problème est que, lorsque j'essaye d'imbriquer cette fonction dans le code HTML généré par JavaScript, il me faudrait quatre délimiteurs. J'ai entendu '' 'ou & "; &"; & "; ou le & amp; + numeric; travailler dans certains cas en tant que troisième et quatrième mais je n'arrive pas à les faire fonctionner ... où je rencontre un problème est ici ...

[note: utilisez à nouveau <) pour la balise ouverte]

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

Depuis que j'ai déjà utilisé " et 'Je n'ai plus rien à utiliser pour appeler la fonction quand une image est cliquée.

Habituellement, je ne demande aucune aide, mais cette fois, je ne peux penser à rien d’autre qui puisse fonctionner ... Je suppose que peut-être que l’utilisation de JS pour générer le code HTML ne me laisse que SEULEMENT 2 délimiteurs qui seront reconnus par le navigateur, mais je ne suis pas sûr, quelqu'un sait à coup sûr? Des correctifs auxquels on peut penser?

Merci, ~ Z ~

Answer 1

Peut-être que cela fonctionnera

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

Autre approche: supposons que vous mettiez tout dans 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

Essayez de construire la chaîne pièce par pièce au lieu d'essayer de créer le littéral complet pour le document.write.

Chaque fois que les choses deviennent trop compliquées à suivre, faites-en une partie à la fois.

var s;

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

Answer 3

Sans voir le code, c’est difficile à dire, mais vous voudrez peut-être tirer davantage parti du fait que javascript est un langage de première classe. Vous pouvez ainsi créer des fonctions et les transmettre comme arguments à d’autres fonctions, ou avoir des fonctions de retour des fonctions.

Ce faisant, vous pouvez décomposer votre page en quelque chose de plus facile à gérer.

Tirez également parti de l'événement onclick.

Vous devriez pouvoir simplifier le javascript et éviter ce problème, IMO.