Question

我该如何解决这个问题？当我点击“微笑”时，它看起来很微笑但是当我点击悲伤时它也会出现一个笑脸。

<a href="#" onclick="lightbox_open();">SMILE<br></a>
<div id="light"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/1024px-Smiley.svg.png" width=100 height=100></div>
<a href="#" onclick="lightbox_open();">SAD</a>
<div id="light"><img src="http://www.clipartbest.com/cliparts/MiL/kkB/MiLkkBAia.png" width=100 height=100></div>
<div id="fade" onClick="lightbox_close();"></div>

CSS：关闭时淡出，而灯箱则亮。

#fade{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index:1001;
    -moz-opacity: 0.7;
    opacity:.70;
    filter: alpha(opacity=70);
}
#light{
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 200px;
    margin-left: -150px;
    margin-top: -100px;                 
    padding: 10px;
    border: 2px solid #FFF;
    background: #CCC;
    z-index:1002;
    overflow:visible;

javascript：用于打开和关闭功能

window.document.onkeydown = function (e)
{
    if (!e){
        e = event;
    }
    if (e.keyCode == 27){
        lightbox_close();
    }
}
function lightbox_open(){
    window.scrollTo(0,0);
    document.getElementById('light').style.display='block';
    document.getElementById('fade').style.display='block';  
}
function lightbox_close(){
    document.getElementById('light').style.display='none';
    document.getElementById('fade').style.display='none';

Answer 1

您不能两次使用相同的ID。您必须使用唯一ID。

试试这个：

在HTML中，为您的两个light div提供唯一ID，例如lightSmile和lightSad。

为了能够为两个灯箱使用相同的CSS，请为两个框添加一个类lightbox，并在CSS中将#light更改为.lightbox。

最后，将lightbox_open()功能更改为下面的功能。

<强> HTML

<a href="#" onclick="lightbox_open('lightSmile');">SMILE<br></a>
<div class="lightbox" id="lightSmile"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/1024px-Smiley.svg.png" width=100 height=100></div>
<a href="#" onclick="lightbox_open('lightSad');">SAD</a>
<div class="lightbox" id="lightSad"><img src="http://www.clipartbest.com/cliparts/MiL/kkB/MiLkkBAia.png" width=100 height=100></div>
<div id="fade" onClick="lightbox_close();"></div>

<强> CSS

.lightbox{
    display: none;
    ...
}

<强> JS

function lightbox_open(id){
    window.scrollTo(0,0);
    document.getElementById(id).style.display='block';
    document.getElementById('fade').style.display='block';  
}

function lightbox_close(){
    document.getElementById('lightSmile').style.display='none';
    document.getElementById('lightSad').style.display='none';
    document.getElementById('fade').style.display='none';
}

如果您查看HTML，您会看到现在在调用lightbox_open()时会发送一个灯箱ID的字符串。
在函数中，此ID字符串作为变量提供（在括号之间：id）。在改变灯箱显示风格的行中，使用了id。

在关闭功能中，两个灯箱的显示风格都设置为默认值。

更新

如果你有很多灯箱，那么在close-function中通过classname访问灯箱会更容易：

function lightbox_close(){
    var list = document.getElementsByClassName('lightbox');
    for (var i=0; i<list.length; i++) {
        list[i].style.display = 'none';
    }
    document.getElementById('fade').style.display='none';
}

如果您愿意使用 jQuery ，您可以使用一行（并且可能更可靠地跨浏览器）：

function lightbox_close(){
    $('.lightbox').css('display','none'); //<--------------jQuery
    document.getElementById('fade').style.display='none';
}

一个页面上有多个灯箱库

1 个答案:

更新