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

Question

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

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

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

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

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

IE ...

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

Опера ...

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

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

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

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

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

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

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

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

Также воспользуйтесь событием onclick.

Вы должны иметь возможность упростить JavaScript и избежать этой проблемы, ИМО.

Answer 3

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

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

var s;

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