javascript - 当有两个或多个具有相同 ID 时操作正确的 <div>

Question

我经营一个 phpBB 论坛，我在上面安装了 this Syntax Highlighter MOD .今天，我开始研究一项功能，该功能将使用两个 DIV 使代码框全屏显示在页面上。用户点击以全屏加载框的 DIV 将始终具有相同的 ID，但语法高亮器具有 DIV ID，每次加载页面时该 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

解决此问题的最简单方法是使用 this 关键字传递对单击元素 (viewToggleImg) 的引用:

onclick="toggleFullScreen(this)"

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

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

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

不过，我建议使用 jQuery以一种不显眼的方式轻松完成此类任务并与旧版浏览器兼容(nextElementSibling 不适用于 IE<9，以防您需要/想要支持它)。

不过，您不需要 jQuery 来处理已经可以工作的这么小的东西，所以这里是使用 nextElementSibling 特征检测的补丁版本，否则 this answer 中概述的 shim :

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 & fullpage demo (在IE8中测试过)

或者使用 jQuery:

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