Question

我想用最低级别的javascript创建一个灯箱（并且没有外部.js文件）。我是JS的新手，所以我不知道如何正确解决一些问题。

我有一组画廊风格的链接。像这样：

<a href = "javascript:void(0)" onclick = "document.getElementById('overlay').style.display='block';document.getElementById('popUpContainer').style.display='block';document.getElementById('post03').style.display='block'" class="box col3" id="pan03"></a>

它以灯箱样式加载“面板”。像这些：

 <div id="popUpContainer">
  <div id="popUp">
    <div class="bigPan" id="post01"></div>
    <div class="bigPan" id="post02"></div>
    <div class="bigPan" id="post03"></div>
    <div class="bigPan" id="post04"></div>
    <div class="bigPan" id="post05"></div>
    <div class="bigPan" id="post06"></div>
    <div class="bigPan" id="post07"></div>
    <div class="bigPan" id="post08"></div>
    <div class="bigPan" id="post09"></div>
    <div class="bigPan" id="post10"></div>
    <div class="bigPan" id="post11"></div>
    <div class="bigPan" id="post12"></div>          
  </div>
 </div>

css是这样的：

#overlay {
            width: 100%;
            height: 100%;
            display: none;
            position: fixed;
            background-color: #FFD365;
            z-index: 300;
            opacity: 0.7;

    }

    #close {
            width: 100%;
            height: 100%;
            z-index: 301;
            background-color: black;
    }

    #popUpContainer {
            position: absolute;
            display: none;
            left: 50%;
            top: 135px;
            padding: 0px;
    }

    #popUp {
            width: 800px;
            height: 520px;
            padding: 0px;
            position: relative;
            left: -50%;
            z-index: 400;
    }

    .bigPan {
            margin:0px;
            width: 100%;
            height: 100%;
            border-radius: 5px;
    }

    #post01 {background-color: #F47A44; display: none;}
    #post02 {background-color: #558F26; display: none;}
    #post03 {background-color: #E30613; display: none;}
    #post04 {background-color: #0E84B4; display: none;}
    #post05 {background-color: #4E2583; display: none;}
    #post06 {background-color: #95C11F; display: none;}
    #post07 {background-color: #009FE3; display: none;}
    #post08 {background-color: #D7007F; display: none;}
    #post09 {background-color: #E6332A; display: none;}
    #post10 {background-color: #E29924; display: none;}
    #post11 {background-color: #008D36; display: none;}
    #post12 {background-color: #EB5B93; display: none;}

确定。一切都运行正常，除非我点击另一个链接显示另一个面板，它加载之前加载的最后一个面板。这是问题的截图：

enter image description here

所以我想解决这个问题，如果可能的话，我希望你能帮助我使用<script>标签和数组来清理代码。

提前谢谢。

这是jsFiddle

Answer 1

也许尝试这样的事情？：

<script type="text/javascript">
    function showPopup(anchor) {
        console.clear();
        var target = anchor.getAttribute("href").replace("#", "");
        console.log("Anchor clicked to show div with id: " + target);

        document.getElementById("overlay").style.display = "block";
        document.getElementById("popUpContainer").style.display = "block";

        var popup = document.getElementById("popUp");
        var posts = popup.getElementsByTagName("div");

        for (var i = 0; i < posts.length; i++) {
            var post = posts[i];
            if (post.id == target) {
                console.log("div with id: " + post.id + " is being shown");
                post.style.display = "block";
            } else {
                console.log("div with id: " + post.id + " is being hidden");
                post.style.display = "none";
            }
        }
    }
</script>

<a id="pan03" href="#post03" onclick="showPopup(this);return false;">post03</a>

我会试着让jsFiddle up

<强>更新：

这是jsFiddle：

http://jsfiddle.net/3jB9p/1/

<强>更新：

要关闭的叠加层的代码：

<a id="overlay" href="#" onclick="closeOverlay(this);return false;"></a>

function closeOverlay(overlay) {
    overlay.style.display = "none";
    document.getElementById("popUpContainer").style.display = "none";
    document.getElementById("bigPan").style.display = "none";
}

<强>更新：

这是一个小提琴，可以修复以前的一些问题并清理代码：http://jsfiddle.net/eqhRG/2/

Answer 2

当你不熟悉JS时，首先要意识到外部javascript文件是你的朋友。使用外部文件可以编写易于使用和扩展的模块化，可重用的代码。所以，我要问的第一件事就是为什么你不能使用外部文件？

您的问题似乎是由于您没有隐藏之前打开的面板而造成的。

您可以将其更改为：<a href = "javascript:void(0)" onclick = "document.getElementById('overlay').style.display='block';document.getElementById('popUpContainer').style.display='block';document.getElementById('post03').style.display='block';;document.getElementById('post02').style.display='none'" class="box col3" id="pan03"></a>

但如果您想移动面板或拥有大量面板，那么这不是一个非常好的解决方案。您可以将所有弹出窗口存储在一个数组中，并使用该数组来显示和隐藏所需的弹出窗口。或者，您可以执行许多灯箱插件所做的事情，这会将您的弹出式窗口放在某处，隐藏，当您想要查看面板时，使用弹出式HTML替换面板的HTML并简单地显示面板和叠加层。使用innerHTML，您可以非常轻松地完成此操作。

灯箱效果（最小的javascript）问题

2 个答案: