Разграничение четырех вложенных элементов в Javascript / Html

Question

Ладно, это меня бесконечно расстраивает.Недавно я закодировал страницу на JS для своего приятеля, который хочет показать семье свадебные фотографии, чтобы узнать, какие из них они хотели бы приобрести.

Я использовал цикл for для подсчета 1-904:

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

Затем я использовал Adobe bridge, чтобы переименовать файлы камеры в 1-904 и их миниатюры (1-904 + _thumb) и использовал номер цикла для отображения 904 пробелов в изображении и правильно пронумерованного изображения:

[примечание: использование <) вместо обычного открытого тега, поскольку сайт не будет его отображать]

Т. е...

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

Опера...

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

Все это отлично работает в IE и Opera (с внешним CSS, изменяющим div, чтобы не было разрыва строки).

Затем я создал функцию для вызова увеличенной версии изображения при нажатии на нее.

Проблема в том, что когда я пытаюсь встроить эту функцию в сгенерированный JavaScript HTML, мне понадобятся четыре разделителя.Я слышал "' или """ или числовое значение &+;в некоторых случаях работаю третьим и четвертым, но, похоже, я не могу заставить их работать...где я сталкиваюсь с проблемой, так это здесь...

[примечание: снова используя <) для открытого тега]

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

Поскольку я уже израсходовал " и ' Теперь мне больше нечего использовать для вызова функции при нажатии на картинку.

Обычно я не прошу ни о какой помощи, но на этот раз я не могу придумать ничего другого, что могло бы сработать...Я предполагаю, что, возможно, использование JS для генерации HTML оставляет мне ТОЛЬКО 2 разделителя, которые будут распознаны браузером, но я не уверен, кто-нибудь знает наверняка?Есть какие-нибудь исправления, о которых кто-нибудь может подумать?

Спасибо, ~Z~

Answer 1

Может быть, это сработает

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

Другой подход:Предположим, вы поместили все в <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

Попробуйте создавать строку по одному фрагменту за раз вместо того, чтобы пытаться создать весь литерал для document.write.

Всякий раз, когда что-то становится слишком запутанным, просто выполняйте по одной части за раз.

var s;

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

Answer 3

Не видя кода, трудно сказать наверняка, но вы можете захотеть больше воспользоваться тем фактом, что javascript - это первоклассный язык, поэтому вы можете создавать функции и передавать их в качестве аргументов другим функциям или заставлять функции возвращать функции.

Делая это, вы можете преобразовать свою страницу во что-то, что звучит немного более управляемо.

Кроме того, воспользуйтесь событием onclick.

Вы должны быть в состоянии упростить javascript и таким образом избежать этой проблемы, IMO.