1

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

有人可以就如何解决这个问题提供一些建议吗？

4

1 回答 1

1

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

onclick="toggleFullScreen(this)"

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

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

并在整个函数中使用这些变量。更新的笔

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

不过，对于已经在工作的这么小的东西，您不需要 jQuery，所以这里是使用功能检测的修补版本，否则这个答案nextElementSibling中概述的 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);
    //...

笔和整页演示（在 IE8 中测试）

或者使用 jQuery：

   var testDIV = $(toggleDIV).next()[0];
于 2013-04-01T01:50:52.910 回答