Question

我操作了一个phpBB论坛，我已经安装了this Syntax Highlighter MOD。今天，我开始研究一个将使用两个DIV的功能，使代码框在页面上全屏显示。用户单击以全屏加载框的DIV将始终具有相同的ID，但语法高亮显示器具有每次加载页面时随机的DIV ID。我遇到了DIV的问题，用户点击时总是在全屏下加载代码框的第一个实例，无论用户点击哪个版本的DIV。

如果你很难理解我在说什么，here is an ugly, but usable demo。要使丑陋的橙色框全屏加载，请单击其上方的蓝色图像。每个蓝色图像都在其自己的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>

有人可以提供一些有关如何解决此问题的建议吗？

Answer 1

解决此问题的最简单方法是使用viewToggleImg关键字传递对点击元素（this）的引用：

onclick="toggleFullScreen(this)"

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

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

在整个函数中使用这些变量。 Updated pen

尽管如此，我建议使用jQuery以非突兀的方式轻松完成此类任务，并与旧版浏览器保持兼容性（nextElementSibling不适用于IE＆lt; 9，以防万一你需要/想要支持它。）

尽管如此，你不需要jQuery来处理已经有效的小东西，所以这里使用nextElementSibling的特征检测的修补版本，this answer中列出的垫片：

function nextElementSibling( el ) {
    do { el = el.nextSibling } while ( el && el.nodeType !== 1 );
    return el;
}
function toggleFullScreen(viewToggleImg){
    var toggleDIV = viewToggleImg.parentNode;
    var testDIV = toggleDIV.nextElementSibling || nextElementSibling(toggleDIV);
    //...

Pen＆amp; fullpage demo（在IE8中测试）

或者使用jQuery：

   var testDIV = $(toggleDIV).next()[0];

当有两个或多个具有相同ID </div>的<div>时，操纵正确的<div>

1 个答案: