Манипулирование правильным , когда есть два или более с одинаковым идентификатором. ⇐ Html

[Anonymous]

Я веду форум phpBB, на котором я установил этот мод Syntax Highlighter. Сегодня я начал работать над функцией, которая будет использовать два DIV, чтобы окно кода отображалось на странице в полноэкранном режиме. DIV, на который пользователь щелкает, чтобы загрузить поле в полноэкранном режиме, всегда будет иметь один и тот же идентификатор, но у средства подсветки синтаксиса есть идентификатор DIV, который выбирается случайным образом при каждой загрузке страницы. У меня проблема с DIV, на который пользователь щелкает, и всегда загружает первый экземпляр поля кода в полноэкранном режиме, независимо от того, какую версию DIV нажимает пользователь.

Если вам трудно понять, о чем я говорю, вот уродливая, но полезная демонстрация. Чтобы уродливое оранжевое окно загружалось в полноэкранном режиме, щелкните синее изображение над ним. Каждое синее изображение находится в своем собственном DIV, оба из которых имеют идентификатор «первый». Первый уродливый оранжевый прямоугольник имеет идентификатор «testDIV», а второй — идентификатор «testDIV2». Код написан таким образом, что DIV каждого уродливого оранжевого прямоугольника должен определяться на основе DIV кнопки. Хотя мой код и работает для этого, он работает только для поиска первого оранжевого квадрата.

Вот написанный мною код, который формирует демо-версию.

Код: Выделить всё

[img]http://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Full_Screen.png[/img]
DIV 1


[img]http://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Full_Screen.png[/img]
DIV 2



body{
background:#000;
}
#testDIV{
background:#F58B00;
max-height:100px;
}
#testDIV2{
background:#F58B00;
max-height:100px;
}




function toggleFullScreen(){
var toggleDIV = document.getElementById("first"); // This stores the ID of the toggle DIV.
var testDIV = document.getElementById("first").nextElementSibling; // Since the div ID will fluctuate each time during page load, this will acquire it for us using the previous div in relation to it.

if (document.getElementById("viewToggleImg").src == "http://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Full_Screen.png")
{
// If we are in here, then we are toggling to full screen.
document.getElementById("viewToggleImg").src='http://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Exit_Full_Screen.png';
document.getElementById("viewToggleImg").style.marginRight ='20px';
toggleDIV.style.position = 'fixed';
toggleDIV.style.top = '0px';
toggleDIV.style.bottom = '0px';
toggleDIV.style.left = '0px';
toggleDIV.style.right = '0px';
toggleDIV.style.background = '#FFF';
toggleDIV.style.paddingTop = '10px';
testDIV.style.position = 'fixed';
testDIV.style.top = '44px';
testDIV.style.bottom = '1px';
testDIV.style.left = '1px';
testDIV.style.right = '1px';
testDIV.style.maxHeight = 'none';
}
else
{
// If we are in here, then we are toggling back to original page view.
document.getElementById("viewToggleImg").src='http://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Full_Screen.png';
document.getElementById("viewToggleImg").style.marginRight = '0px';
toggleDIV.style.position = 'static';
toggleDIV.style.background = 'none';
toggleDIV.style.paddingTop = '0px';
testDIV.style.position = 'static';
testDIV.style.maxHeight = '100px';
}
}

Может ли кто-нибудь дать совет, как решить эту проблему?