Question

首先，这是小提琴：http://jsfiddle.net/ribbs2521/Q7C3m/1/

我以为我可以在小提琴上运行JS，但它不起作用，无论我的所有代码都在那里，所以我认为我们应该很好。

所以，我正在尝试创建我自己的自定义图像查看器，它工作得很好，直到我尝试实现PREV和NEXT（在小提琴中它们是文本但它们实际上是图像）。我点击下一步，它会在查看器中更改图片，但随后我的叠加div消失。

我知道它实际上改变了图片的原因是因为如果我在prevImage（）和/或nextImage（）的末尾发出警告，我会看到更改的图片，但是一旦我点击确定它就会消失。

我不知道发生了什么事。我不确定是不是我的JS或CSS导致了这个问题，我对JS，CSS和HTML都很新。

有谁可以告诉我为什么我的div在执行此功能后会消失？

这是JS：

var images = Array();
var cursor = 0;

function showHide(obj) {
    alert("Working");
    var overlay = document.getElementById("ImgOverlay");
    if (obj instanceof HTMLImageElement) {
        // Get list of images in gallery
        var gallery = document.getElementById("gallery");
        images = gallery.getElementsByTagName("img");
        cursor = -1;
        while (images[++cursor].src != obj.src) {}

        // Show the image
        putImageInViewer(obj);
        overlay.style.display = "block";

    } else if (overlay.style.display !== "none" && overlay.style.display !== "") { // If it's the div that you clicked...
        hideElement(overlay);
    }
}

function hideElement(element) {
    element.style.display = "none";
}

function putImageInViewer(obj) {
    var img = new Image();
    img.src = obj.src;
    var size = 600;
    var h = img.height;
    var w = img.width;
    // We want a max size of 600 but don't want to blow images up (bad graphics)
    // Images should be their actual size but limited to 600px MAX
    if (h <= 600 && w <= 600) {
        if (h > w) {
            size = h;
        } else {
            size = w;
        }
    }
    if (h > w) {
        document.getElementById("overlay-img").innerHTML = "<img src=\"" + img.src + "\" height=\"" + size + "\">";
    } else {
        document.getElementById("overlay-img").innerHTML = "<img src=\"" + img.src + "\" width=\"" + size + "\">";
    }
}

function nextImage() {
    // Check if we need to loop around
    if (cursor < images.length) {
        cursor++;
    } else {
        cursor = 0;
    }
    putImageInViewer(images[cursor]);
}

function prevImage() {
    // Check if we need to loop around
    if (cursor > 0) {
        cursor--;
    } else {
        cursor = images.length;
    }
    putImageInViewer(images[cursor]);
}

这是CSS：

#wrap {
    margin: 0 auto;
}
#wrap li {
    float:left;
    position:relative;
    display:inline-block;
    width:240px;
    height:240px;
    margin:10px;
    padding:10px;
    background:#fff;
    box-shadow:0 0 5px rgba(0, 0, 0, .35);
    overflow: hidden;
}
#wrap li div {
    position:absolute;
    height:0;
    width:220px;
    background:rgba(0, 0, 0, .45);
    overflow:hidden;
    bottom:10px;
    left:10px;
    padding: 0 10px;
    line-height:50px;
    color:#fff;
    transition:height 1s;
}
#wrap li:hover div {
    height:50px;
}
#wrap li img {
    width: 240px;
    height: 240px;
    margin: 0px 0 0 0px;
    cursor: pointer;
}
#ImgOverlay {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    /*fallback*/
    background-color: rgba(0, 0, 0, 0.6);
    /*background-image:none;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;*/
    display: none;
}
#imgnav {
    position: fixed;
    top: 38%;
    left: 50%;
    margin: -15px 0 0 -363px;
    width: 730px;
    height: 60px;
}
#overlay-img {
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -300px 0 0 -300px;
    width: 600px;
    height: 600px;
}
#overlay-img img {
    border: 2px solid white;
    display: block;
    margin: auto;
}

最后，HTML：

<div id="wrap">
    <h1>An Image Gallery</h1>
    <ul id="gallery">
        <li>
            <img src="w" onclick="showHide(this);">
            <div>Image 1</div>
        </li>
        <li>
            <img src="w" onclick="showHide(this);">
            <div>Image 2</div>
        </li>
    </ul>
    <div id="clear"></div>
</div>
<!-- For Image Viewer -->
<div id="ImgOverlay" onclick="showHide(this);">
    <div id="imgnav"> <span style="color: white; cursor: pointer; float: left" height="60px" width="60px" onclick="prevImage();">PREV</span>
        <div id="overlay-img">
            <!-- Image will go here -->
        </div>  <span style="color: white; cursor: pointer; float: left" height="60px" width="60px" onclick="prevImage();">NEXT</span>

    </div>
</div>
<!-- End Image Viewer -->

Answer 1

您可能正在使用JavaScript event propagation。简而言之，触发DOM元素的事件（例如“PREV”和“NEXT”按钮上的“click”事件）会冒泡DOM，再次触发每个原始元素的父元素。在您的情况下，这意味着当您点击“下一步”按钮时，它会触发prevImage()，然后当事件冒泡到ImgOverlay时，它会触发showHide(this)。

您需要修改事件处理程序以告知浏览器不要传播事件。将按钮标记更改为以下内容：

<span id="nextButton" style="color: white; cursor: pointer; float: left" height="60px" width="60px">NEXT</span>

然后使用以下命令处理click事件：

var nextButton = document.getElementById('nextButton');
nextButton.onclick = function (ev) {
  nextImage();

  if (!ev) {
    // Old versions of Internet Explorer do not pass the event to handlers.
    ev = window.event;
  }
  ev.cancelBubble = true;
  if (ev.stopPropagation) {
    // W3C standard, works in Chrome, Firefox, Safari, etc.
    ev.stopPropagation();
  }
};

Javascript函数完成后，叠加Div消失

1 个答案: