Javascript 操作正确的<；部门>；当有两个或多个具有相同ID时

我经营一个phpBB论坛，我已经安装了它。今天，我开始开发一个功能，它将使用两个div使代码框全屏显示在页面上。用户在其上单击以全屏加载框的DIV将始终具有相同的ID，但语法高亮显示器具有一个DIV ID，该ID在每次加载页面时都是随机的。我对用户单击的DIV有一个问题，不管用户单击的是哪个版本的DIV，总是全屏加载代码框的第一个实例

如果你很难理解我说的话。要使丑陋的橙色框全屏加载，请单击其上方的蓝色图像。每个蓝色图像都位于其自己的DIV中，两者都具有ID“first”。第一个丑陋的橙色框的ID为“testDIV”，第二个框的ID为“testDIV2”。代码的编写方式是，每个丑陋的橙色框的DIV应该根据按钮的DIV来确定。虽然我的代码适用于此，但它只适用于查找第一个橙色框

下面是我编写的构成演示的代码

<!-- HTML div Guniea Pigs -->
<div id="first" align="right"><img src="http://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Full_Screen.png" height="24" width="24" onclick="toggleFullScreen()" id="viewToggleImg" style="cursor:pointer"></div>
<div id="testDIV">DIV 1</div>

<!-- Round 2 -->
<div id="first" align="right"><img src="http://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Full_Screen.png" height="24" width="24" onclick="toggleFullScreen()" id="viewToggleImg" style="cursor:pointer"></div>
<div id="testDIV2">DIV 2</div>

<!-- div Styling, to help us see our guinea pigs. -->
<style>
    body{
        background:#000;
    }
    #testDIV{
        background:#F58B00;
        max-height:100px;
    }
    #testDIV2{
        background:#F58B00;
        max-height:100px;
    }
</style>

<!-- JavaScript that will control the way that the page behaves on page toggling. THIS IS WHAT IS MOST IMPORTANT! -->
<script>
    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';
        }
    }
</script>

第一组
第2组
身体{
背景：#000；
}
#testDIV{
背景#F58B00；
最大高度：100px；
}
#testDIV2{
背景#F58B00；
最大高度：100px；
}
函数切换全屏（）{
var toggleDIV=document.getElementById（“first”）；//这存储了toggleDIV的ID。
var testDIV=document.getElementById（“first”）.nextElementSibling；//由于在每次页面加载期间div ID都会波动，因此这将使用与之相关的前一个div为我们获取它。
if（document.getElementById（“viewToggleImg”）.src==”http://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Full_Screen.png")
{
//如果我们在这里，那么我们将切换到全屏。
document.getElementById（“viewToggleImg”）.src='10〕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'；
}
其他的
{
//如果我们在这里，那么我们将切换回原始页面视图。
document.getElementById（“viewToggleImg”）.src='10〕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'；
}
}

---

是否有人可以就如何解决此问题提供一些建议？

解决此问题的最简单方法是使用

this

关键字传递对已单击元素（

viewtogleimg

）的引用：

onclick="toggleFullScreen(this)"

然后通过DOM遍历方法获取相关元素：

function toggleFullScreen(viewToggleImg){
    var toggleDIV = viewToggleImg.parentNode;
    var testDIV = toggleDIV.nextElementSibling;

并在整个函数中使用这些变量

---

尽管如此，我还是建议使用，以一种非突兀的方式轻松完成此类任务，并与旧浏览器兼容（

nextElementSibling

不适用于IE解决此问题的最简单方法是使用

this

关键字传递对单击元素的引用（

viewtogleimg

）：

onclick="toggleFullScreen(this)"

然后通过DOM遍历方法获取相关元素：

function toggleFullScreen(viewToggleImg){
    var toggleDIV = viewToggleImg.parentNode;
    var testDIV = toggleDIV.nextElementSibling;

并在整个函数中使用这些变量

---

尽管如此，我还是建议使用它以一种非突兀的方式轻松地完成这些任务，并提高与旧浏览器的兼容性（

nextElementSibling

不适用于IEID。必须是唯一的。这就是类的用途（例如

，因为两个div都有相同的id，

document.getElementById（“first”）

始终返回相同的div，并且该div将始终具有相同的同级元素。使您的id唯一。@JCOC611我知道id应该是唯一的。我知道您应该使用类来处理类似的事情，但我将无法控制div，因为此代码将用于用户帖子以及所有使用此c的用户帖子ode都会有相同的div。顺便说一句，很高兴看到我不是唯一一个以phpBB问题开始SO职业生涯的人。在主题上，正如前面所说的，你需要使用类，因为重复ID根本不是有效的标记。这意味着，如果你的mod需要ID，你必须手动修补mod。不过，使用你当前的cod结构中，很可能没有任何ID或类。ID必须是唯一的。这就是类的用途（例如，

，因为两个div都有相同的ID，

document.getElementById（“第一个”）

始终返回相同的div，并且该div将始终具有相同的同级元素。使您的id唯一。@JCOC611我知道id应该是唯一的。我知道您应该使用类来处理类似的事情，但我将无法控制div，因为此代码将用于用户帖子以及所有使用此c的用户帖子ode都会有相同的div。顺便说一句，很高兴看到我不是唯一一个以phpBB问题开始SO职业生涯的人。在主题上，正如前面所说的，你需要使用类，因为重复的ID根本不是有效的标记。这意味着，如果你的mod需要ID，yo